Media Queries: come scegliere come target desktop, tablet e mobile?

Ho svolto ricerche sulle query sui media e ancora non capisco come indirizzare dispositivi di determinate dimensioni.

Voglio essere in grado di scegliere come target desktop, tablet e dispositivi mobili. 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) 

O:

 # 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) 

Cosa pensi che questi “breakpoint” dovrebbero essere per ogni dispositivo?

    IMO questi sono i migliori punti di interruzione:

     @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 : raffinato per funzionare meglio con 960 griglie:

     @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 em, in gran parte in b / c in modo da permettersi lo zoom. Con lo zoom standard 1em === 16px . Moltiplicare i pixel di 1em/16px per ottenere ems. Ad 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, quindi si aggiungono query multimediali sempre crescenti, lavorando su schermi sempre più grandi. Indipendentemente dal fatto che si preferisca min- , max- o combinazioni degli stessi, si deve essere consapevoli dell’ordine delle proprie regole, tenendo presente che se più regole corrispondono allo stesso elemento, le regole successive sostituiranno quelle precedenti.

    Se vuoi scegliere come target un dispositivo, scrivi semplicemente min-device-width . Per esempio:

    Per iPhone

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

    Per compresse

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

    Ecco alcuni buoni articoli:

    • Come adattare il tuo sito Web per l’Apple iPad
    • Query multimediali CSS3

    Non scegliere come target dispositivi o dimensioni specifici!

    La saggezza generale non è mirare a dispositivi o dimensioni specifici , ma a riformulare il termine “punto di rottura”:

    • sviluppare il sito per dispositivi mobili usando prima le percentuali o gli ems, non i pixel,
    • quindi provalo in una finestra più ampia e nota dove inizia a fallire,
    • ridisegnare il layout e aggiungere una query multimediale CSS solo per gestire le parti rotte,
    • ripetere il processo fino a raggiungere il punto di interruzione successivo.

    È ansible utilizzare responsivepx.com per trovare i punti di interruzione “naturali”, come in “Breakpoints is dead” di Marc Drummond .

    Usa i breakpoint naturali

    I “punti di rottura” diventano quindi il punto in cui il tuo design mobile inizia a “rompersi”, cioè cessano di essere utilizzabili o visivamente gradevoli. Una volta che hai un buon sito mobile funzionante, senza query multimediali, puoi smettere di preoccuparti delle dimensioni specifiche e semplicemente aggiungere query multimediali che gestiscono windows di dimensioni maggiori.

    Se non stai tentando di appuntare un disegno su una dimensione esatta dello schermo, questo approccio elimina la necessità di indirizzare dispositivi specifici . L’ integrità del design stesso in ogni punto di interruzione assicura che reggerà a qualsiasi dimensione. In altre parole, se una sezione di menu / contenuto / qualsiasi cosa smette di essere utilizzabile a una determinata dimensione, progettare un punto di interruzione per quella dimensione , non per una specifica dimensione del dispositivo.

    Vedi il post di Lyza Gardner sui punti di rottura comportamentali , e anche il post di Zeldman su Ethan Marcotte e come il responsive web design si sia evoluto dall’idea iniziale.

    1. Ho usato questo sito per trovare la risoluzione e sviluppato CSS per numeri reali. I miei numeri variano un po ‘dalle risposte di cui sopra, tranne che il mio css effettivamente colpisce i dispositivi desiderati.

    2. Inoltre, disponi di questo pezzo di codice di debug subito dopo la tua query multimediale: Ad esempio:

       @media only screen and (min-width: 769px) and (max-width: 1281px) { /* 10 inch tablet enter here */ body::before { content: "tablet to some desktop media query (769 > 1281) fired"; font-weight: bold; display: block; text-align: center; background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */ position: absolute; top: 0; left: 0; right: 0; z-index: 99; } } 

      Preso nel web, non ricordo esattamente il sito. Aggiungi questo elemento di debug in ogni singola query multimediale e vedrai quale query è stata applicata.

    I migliori punti di interruzione consigliati da Twitter Bootstrap

     /* Custom, iPhone Retina */ @media only screen and (min-width : 320px) { } /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) { } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) { } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { } 

    Media query per punti di interruzione di dispositivo comuni

     /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /********** iPad 3 **********/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } /* iPhone 5 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* iPhone 6 ----------- */ @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* iPhone 6+ ----------- */ @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* Samsung Galaxy S3 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* Samsung Galaxy S4 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } /* Samsung Galaxy S5 ----------- */ @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } 
    1. Dispositivi molto piccoli (telefoni, fino a 480 px)
    2. Piccoli dispositivi (tablet, 768 px e oltre)
    3. Dispositivi di media grandezza (grandi tablet, laptop e desktop panoramici, 992px e superiori)
    4. Dispositivi di grandi dimensioni (desktop di grandi dimensioni, da 1200 px in su)
    5. e-reader di ritratto (Nook / Kindle), tavolette più piccole – larghezza minima: 481 px
    6. tavolette verticali, ritratto iPad, e-reader orizzontali – larghezza minima: 641 px
    7. tablet, iPad paesaggio, laptop la-res – larghezza minima: 961 px
    8. Larghezza dispositivo HTC One: altezza dispositivo 360px: 640px -webkit-device-pixel-ratio: 3
    9. Larghezza dispositivo Samsung Galaxy S2: altezza dispositivo 320px: 534px -webkit-device-pixel-ratio: 1,5 (minimo – moz-device-pixel-ratio: 1,5), (-o-min-device-pixel-ratio: 3/2), (rapporto min-device-pixel: 1,5
    10. Larghezza dispositivo Samsung Galaxy S3: altezza dispositivo 320px: 640px -webkit-device-pixel-ratio: 2 (rapporto min-moz-device-pixel: 2), – Browser Firefox precedenti (precedenti a Firefox 16) –
    11. Larghezza dispositivo Samsung Galaxy S4: altezza dispositivo 320px: 640px -webkit-device-pixel-ratio: 3
    12. LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2
    13. Asus Nexus 7 device-width: 601px device-height: 906px -webkit-min-device-pixel-ratio: 1.331) e (-webkit-max-device-pixel-ratio: 1.332)
    14. iPad 1 e 2, iPad Mini larghezza del dispositivo: 768 px altezza del dispositivo: 1024 px -webkit-device-pixel-ratio: 1
    15. iPad 3 e 4: larghezza del dispositivo: 768 px altezza del dispositivo: 1024px -webkit-device-pixel-ratio: 2)
    16. Larghezza dispositivo iPhone 3G: altezza dispositivo 320px: 480px -webkit-device-pixel-ratio: 1)
    17. Larghezza dispositivo iPhone 4: altezza dispositivo 320 px: 480px -webkit-device-pixel-ratio: 2)
    18. Larghezza dispositivo iPhone 5: altezza dispositivo 320px: 568px -webkit-device-pixel-ratio: 2)

    Non si tratta del conteggio dei pixel, è una questione di dimensioni reali (in mm o pollici) di caratteri sullo schermo, che dipende dalla densità dei pixel. Quindi “min-width:” e “max-width:” sono inutili. Una spiegazione completa di questo problema è qui: qual è esattamente il rapporto pixel del dispositivo?

    Le query “@media” prendono in considerazione il numero di pixel e il rapporto tra pixel del dispositivo, risultando in una “risoluzione virtuale”, che è ciò che devi prendere in considerazione durante la progettazione della tua pagina: se il tuo font è 10px a larghezza fissa e il ” risoluzione orizzontale virtuale “è di 300 px, saranno necessari 30 caratteri per riempire una linea.

    Dal momento che ci sono molte diverse dimensioni dello schermo che cambiano sempre e molto probabilmente cambieranno sempre il modo migliore per andare è basare i punti di interruzione e le mediaqueries sul progetto.

    Il modo più semplice per farlo è quello di prendere il tuo desktop design completato e aprirlo nel tuo browser web. Riduci lo schermo lentamente per renderlo più stretto. Osserva per vedere quando il design inizia, “rompi”, o sembra orribile e stretto. A questo punto sarebbe necessario un punto di interruzione con una query multimediale.

    È comune creare tre serie di query multimediali per desktop, tablet e telefono. Ma se il tuo design sembra buono su tutti e tre i motivi, perché preoccuparti della complessità di aggiungere tre diverse query multimediali che non sono necessarie. Fatelo in base alle necessità.

    In seguito ha funzionato per me. Il comportamento non cambia sul desktop. Ma su tablet e dispositivi mobili, espongo la barra di navigazione per coprire l’immagine del grande logo. Nota, usa il margine (in alto e in basso) quanto necessario per l’altezza del logo. Per il mio caso, il 60px in alto e in basso ha funzionato perfettamente. Controlla la barra di navigazione qui .

     @media (max-width:768px) { .navbar-toggle { margin: 60px 0; } } 

    Al giorno d’oggi la cosa più comune è vedere i dispositivi retina-screen, in altre parole: dispositivi con risoluzioni elevate e densità di pixel molto elevata (ma in genere di dimensioni fisiche inferiori a 6 pollici). È per questo che avrai bisogno di retina di media-query specializzate sul tuo CSS. Questo è l’esempio più completo che ho trovato:

     @media only screen and (min-width: 320px) { /* Small screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min-resolution: 192dpi) and (min-width: 320px), only screen and ( min-resolution: 2dppx) and (min-width: 320px) { /* Small screen, retina, stuff to override above media query */ } @media only screen and (min-width: 700px) { /* Medium screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min-resolution: 192dpi) and (min-width: 700px), only screen and ( min-resolution: 2dppx) and (min-width: 700px) { /* Medium screen, retina, stuff to override above media query */ } @media only screen and (min-width: 1300px) { /* Large screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min-resolution: 192dpi) and (min-width: 1300px), only screen and ( min-resolution: 2dppx) and (min-width: 1300px) { /* Large screen, retina, stuff to override above media query */ } 

    Fonte: sito Web CSS-Tricks

     Extra small devices ~ Phones (< 768px) Small devices ~ Tablets (>= 768px) Medium devices ~ Desktops (>= 992px) Large devices ~ Desktops (>= 1200px)