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:
portraitolandscape -
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.
Supporto Browser
IP: 18.97.14.88
