Le media queries (query multimediali) è una tecnica CSS introdotta nei CSS3, utilizza la regola @media per includere un blocco di proprietà CSS solo se una determinata condizione è vera.
Esempio di media queries per dispositivi extra piccoli come gli smartphone
@media only screen and (max-width: 600px), only screen and (min-width: 600px){
}in questo caso il blocco di proprietà css definite in questa regola @media saranno soddisfatte solo se la dimensione dello schermo è 600px o più piccola, oppure 600px e superiore.
Esempio di media queries per dispositivi di grandi dimensioni come laptop e desktop
@media only screen and (min-width: 992px), only screen and (min-width: 1200px) {
}in questo caso il blocco di proprietà css definite in questa regola @media saranno soddisfatte solo se la dimensione dello schermo è 992px e superiore, o 1200px e superiore.
Esempio di media queries per dispositivi di medie dimensioni come i tablet
@media only screen and (min-width: 768px) {
}in questo caso il blocco di proprietà css definite in questa regola @media saranno soddisfatte solo se la dimensione dello schermo è 768px e superiore.
Quindi avremo un foglio di stile così composto
style.css
@media only screen and (max-width: 600px), only screen and (min-width: 600px){
/* Dispositivi molto piccoli (telefoni, 600px e inferiori), solo schermo e (larghezza minima: 600px)*/
}
@media only screen and (min-width: 768px) {
/* Dispositivi di medie dimensioni (tablet orizzontali, 768px e superiori) */
}
@media only screen and (min-width: 992px), only screen and (min-width: 1200px) {
/* Dispositivi di grandi dimensioni (laptop/desktop, 992 px e superiori), dispositivi extra large (laptop e desktop di grandi dimensioni, 1200 px e superiori) */
}
con le regole css definite per ciascun dispositivo.