Ho fatto qualche ricerca sulle media queries e non ho ancora capito bene come indirizzare i dispositivi di certe dimensioni.
Voglio essere in grado di mirare a desktop, tablet e mobile. So che ci saranno alcune discrepanze, ma sarebbe bello avere un sistema generico che può essere utilizzato per indirizzare questi dispositivi.
Alcuni esempi che ho trovato:
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
Oppure:
# Phone
only screen and (max-width:320px)
# Tablet
only screen and (min-width:321px) and (max-width:768px)
# Desktop
only screen and (min-width:769px)
Quali pensi che questi 'breakpoints' dovrebbero essere per ogni dispositivo?
IMO questi sono i migliori punti di rottura:
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Modifica: Rifinito per funzionare meglio con le griglie 960:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
In pratica, molti designer convertono i pixel in ems, in gran parte perché gli ems permettono meglio lo zoom. Allo zoom standard 1em === 16px
. Moltiplica i pixel per 1em/16px
per ottenere gli ems. Per esempio, 320px === 20em
.
In risposta al commento, la min-width
è standard nel design "mobile-first", in cui si inizia progettando per gli schermi più piccoli, e poi si aggiungono media queries sempre più grandi, lavorando su schermi sempre più grandi. Indipendentemente dal fatto che tu preferisca min-
, max-
, o combinazioni di queste, sii consapevole dell'ordine delle tue regole, tenendo a mente che se più regole corrispondono allo stesso elemento, le regole successive sovrascriveranno le regole precedenti.
Se vuoi indirizzare un dispositivo, allora scrivi semplicemente min-device-width
. Per esempio:
@media only screen and (min-device-width: 480px){}
@media only screen and (min-device-width: 768px){}
Qui ci sono alcuni buoni articoli:
Ho usato questo sito per trovare la risoluzione e ho sviluppato il CSS per i numeri reali. I miei numeri variano abbastanza dalle risposte di cui sopra, tranne che il mio CSS colpisce effettivamente i dispositivi desiderati.
Inoltre, avere questo pezzo di codice di debug subito dopo la vostra media query ad es:
@media only screen and (min-width: 769px) and (max-width: 1281px) {
/* per schermi di tablet da 10 pollici */
body::before {
content: "tablet a qualche media query desktop (769 > 1281) sparato";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9); /* Giallo semi-trasparente */
posizione: assoluto;
top: 0;
sinistra: 0;
destra: 0;
z-index: 99;
}
}
Aggiungi questo elemento di debug in ogni singola media query e vedrai quale query è stata applicata.