CSS @media
La regola CSS3 @media consente di applicare stili in base al contesto
La regola @media
in CSS3 permette di applicare condizioni logiche per modificare lo stile in base alla larghezza, altezza, orientamento, risoluzione e altri parametri del dispositivo o della finestra. È una componente chiave per creare siti **responsive** e adattabili a ogni schermo.
Sintassi
/* Regole CSS */
}
Condizioni principali e loro significato:
-
max-width: Applica gli stili solo se la larghezza della viewport è inferiore o uguale al valore specificato. Esempio:
@media (max-width: 600px)
-
min-width: Applica gli stili solo se la larghezza della viewport è maggiore o uguale al valore specificato. Esempio:
@media (min-width: 768px)
-
orientation: Verifica l'orientamento del dispositivo. Valori:
portrait
olandscape
-
and: Permette di combinare più condizioni. Esempio:
@media (min-width: 600px) and (max-width: 1024px)
Esempio proprietà: @media
Codice Esempio: @media

.media-example {
width: 80%;
padding: 20px;
background-color: #aed581;
border: 2px solid #33691e;
border-radius: 10px;
font-size: 18px;
text-align: center;
margin: auto;
}
@media (max-width: 600px) {
.media-example {
background-color: #ffccbc;
}
}
Contenuto Esempio: @media
Esempio di utilizzo di @media
In questo esempio, lo sfondo del box cambia colore se la larghezza dello schermo è inferiore a 767px:
CSS e HTML per una media query:
<style>
.media-example {
width: 80%;
padding: 20px;
background-color: #aed581;
border: 2px solid #33691e;
border-radius: 10px;
font-size: 18px;
text-align: center;
margin: auto;
}
@media (max-width: 767px) {
.media-example {
background-color: #ffccbc; /* colore diverso per schermi piccoli */
}
}
</style>
<div class="media-example">
Ridimensiona la finestra per vedere il cambio di colore!
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.