Query multimediali: Come mirare a desktop, tablet e mobile?

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?

Quantastical
Domanda modificata 2º maggio 2013 в 1:06
Programmazione
css3 css mobile tablet media-queries
16º giugno 2011 в 10:57
18 visualizzazioni
Soluzione

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.

ryanve
Risposta modificata 28º giugno 2017 в 5:22
Commentari (16)

Se vuoi indirizzare un dispositivo, allora scrivi semplicemente min-device-width. Per esempio:

Per iPhone

@media only screen and (min-device-width: 480px){}

Per i tablet

@media only screen and (min-device-width: 768px){}

Qui ci sono alcuni buoni articoli:

Fizzix
Risposta modificata 17º marzo 2014 в 5:13
Commentari (10)

  1. 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.

  2. 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.

loxsat
Risposta modificata 12º gennaio 2019 в 10:25
Commentari (0)