Come creare: punti di interruzione di dispositivi tipici

Impara come utilizzare le query media per i punti di interruzione di dispositivi comuni.

punti di interruzione di dispositivi tipici

Esistono molti schermi e dispositivi con diverse altezze e larghezze, quindi è difficile creare punti di interruzione precisi per ogni dispositivo.

Per semplificare le operazioni, puoi orientarti su cinque gruppi comuni:

esempio

/* dispositivi extra-piccoli (cellulari, 600px e inferiori) */
@media only screen and (max-width: 600px) {...}
/* dispositivi piccoli (tablet verticale e grandi smartphone, 600px e superiori) */
@media only screen and (min-width: 600px) {...}
/* dispositivi medi (tablet orizzontale, 768px e superiori) */
@media only screen and (min-width: 768px) {...}
/* dispositivi grandi (laptop e computer da scrivania, 992px e superiori) */
@media only screen and (min-width: 992px) {...}
/* dispositivi extra-grandi (laptop e computer da scrivania, 1200px e superiori) */
@media only screen and (min-width: 1200px) {...}

prova tu stesso

pagine correlate

Tutorial:Query media CSS

Tutorial:esempio di query media CSS

manuale di riferimento:Regola @media CSS

Tutorial:realizzare design web responsive tramite query media

manuale di riferimento:metodo JavaScript window.matchMedia()