Media query: come indirizzare desktop, tablet e dispositivi mobili?

472

Ho fatto alcune ricerche sulle query dei media e ancora non capisco come scegliere come target dispositivi di determinate dimensioni.

Voglio essere in grado di indirizzare desktop, tablet e dispositivi mobili. So che ci saranno alcune discrepanze ma sarebbe bello avere un sistema generico che possa 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)

Quali dovrebbero essere i punti di interruzione per ciascun dispositivo?

css  mobile  media-queries  tablet 
— Betamax
fonte
— Ahsan Rathod
— Dmytro Dzyubak

Risposte:

644

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 progettisti convertono i pixel in em, in gran parte in b / c ems è più conveniente lo zoom. Con lo zoom standard 1em === 16px. Moltiplica i pixel 1em/16pxper ottenere ems. Ad esempio 320px === 20em,.

In risposta al commento, min-widthè standard nel design "mobile-first", in cui inizi progettando per i tuoi schermi più piccoli, quindi aggiungi query multimediali sempre crescenti, facendoti strada su schermi sempre più grandi. Indipendentemente dal fatto che tu preferisca min-, max-o una combinazione di questi, sia a conoscenza dell'ordine delle tue regole, tenendo presente che se più regole corrispondono allo stesso elemento, le regole successive avranno la precedenza sulle regole precedenti.

— ryanve
fonte
1
Mi sono chiesto di aumentare il limite inferiore delle query multimediali. Sembra logico, ma non l'ho visto menzionato troppo spesso. Vorrei anche fare un passo avanti e convertirmi in EMS. Guarda gli screenshot di @jonikorpi sul comportamento del sito di Ethan Marcotte con zoom e query multimediali px. github.com/scottjehl/Respond/issues/18
— Larry
21
Perché dovresti usare la larghezza minima anziché la larghezza massima? Come eviteresti che il min-width: 320pxCSS abbia la precedenza su min-width: 801px?
— user2019515
2
Questo codice non funziona sui miei dispositivi mobili! Qualcuno può fornire un esempio funzionante!
— Jacob,
3
Qualcuno ha l'equivalente "larghezza massima" di questo?
— Pylinux,
6
2018 - 2k e 4k sono in aumento
— Alexander
160

Non scegliere come target dispositivi o dimensioni specifici!

La saggezza generale non è quella di scegliere come target dispositivi o dimensioni specifici , ma di riformulare il termine "breakpoint":

  • sviluppare prima il sito per dispositivi mobili utilizzando percentuali o em, non pixel,
  • quindi provalo in una vista più grande e nota dove inizia a fallire,
  • riprogettare 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.

È possibile utilizzare responsivepx.com per trovare i punti di interruzione "naturali", come in "i punti di interruzione sono morti" di Marc Drummond .

Usa i punti di interruzione naturali

I "punti di interruzione" diventano quindi il punto effettivo in cui il design del dispositivo mobile inizia a "rompersi", ovvero cessano di essere utilizzabili o visivamente gradevoli. Una volta che hai un buon sito mobile funzionante, senza query multimediali, puoi smettere di preoccuparti per dimensioni specifiche e aggiungere semplicemente query multimediali che gestiscono finestre successivamente più grandi.

Se non stai cercando di aggiungere un design a una dimensione dello schermo esatta, questo approccio funziona rimuovendo la necessità di scegliere come target dispositivi specifici . L' integrità del design stesso in ogni punto di interruzione garantisce che resisterà a qualsiasi dimensione. In altre parole, se un menu / sezione contenuto / qualunque cosa smetta di essere utilizzabile a una determinata dimensione, progettare un punto di interruzione per quella dimensione , non per una dimensione specifica del dispositivo.

Vedi il post di Lyza Gardner sui breakpoint comportamentali , e anche il post di Zeldman su Ethan Marcotte e su come il web design reattivo si è evoluto dall'idea iniziale.

Usa markup semantico

Inoltre, la struttura DOM più semplice e semantica con nav, header, main, section, footerecc (evitando abomini come div class="header"con interni nidificati divtag) il più facile sarà l'ingegnere di risposta, in particolare evitando di carri utilizzando CSS griglia di layout (di Sarah Drasner generatore di griglia è un ottimo strumento per questo) e flexbox per organizzare e riordinare secondo il piano di progettazione RWD.

— Dave Everitt
fonte
10
I clienti vorranno che il loro sito appaia così sul loro iPad. Il mio miglior punto di interruzione farebbe passare il sito al layout mobile sull'iPad. Il cliente non lo accetterebbe, vogliono che appaiano versioni fantasiose su iPad e altri tablet. La saggezza generale non sta pagando il mio stipendio :) Avevo bisogno di fare trucchi con il meta tag viewport. È stato molto doloroso ma l'ho risolto con un piccolo aiuto da JavaScript (come sempre). PS: ho usato unità cm, non pixel.
— Rolf,
Con i punti di interruzione naturali puoi avere un punto di interruzione di medie dimensioni che include l'iPad (e altri tablet) in modalità orizzontale o aggiungere un altro punto di interruzione per la modalità ritratto. A volte ho usato quattro punti di interruzione, avviando sempre CSS e tutto il markup con il mobile-first (è più difficile ridimensionare e concentrarsi sul mobile significa che il tuo design e contenuto sono ridotti agli elementi essenziali, che puoi espandere all'aumentare delle dimensioni) , uno appena sopra i 400 px di larghezza (o "sopra le dimensioni del cellulare"), quindi due dimensioni del desktop, una extra larga. È quindi possibile assegnare uno stile al punto di interruzione "sopra mobile" affinché funzioni perfettamente sull'iPad.
— Dave Everitt,
2
Questo non è abbastanza per tutti i casi. Prendi ad esempio le caselle di controllo. Potrebbero andare bene per tutti i browser Web su un PC, ma su un tablet essere troppo piccoli per essere toccati dall'utente. A volte devi scegliere come target i dispositivi, che si tratti di saggezza generale o meno. Questo è un buon articolo: html5rocks.com/en/mobile/cross-device
— monalisa717
2
Sono con Dave su questo - ci sono così tanti dispositivi che non puoi progettare per tutti. L'uso di punti di interruzione naturali garantisce che il tuo sito funzioni indipendentemente dalle dimensioni dello schermo disponibili. Per quanto riguarda i clienti che desiderano che il loro sito appaia in un certo modo, è necessario educarli. Considerando che le caselle di controllo sono troppo piccole: dove sono le tue etichette?
— diggersworld,
@ user1411056 - buon articolo. Immagino che dipenda da cosa stai puntando e da come funziona il tuo sito / webapp. Direi che il design reattivo di base dovrebbe essere alla base di tutto prima che vengano messi in atto i perfezionamenti. diggersworld Sono tutto per educare i clienti - perché altrimenti ti stanno pagando? E sì, le caselle di controllo possono essere reattive; toccando un'etichetta è equivalente e le etichette possono essere disegnate. Poi c'è l'inutilità dell'hover sui dispositivi touch; che può avere grandi schermi, e il ritardo 300ms rubinetto . Una base RD di base, arricchita da JS.
— Dave Everitt,
154

Se si desidera targetizzare un dispositivo, basta scrivere 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:

— Sandeep
fonte
32
Il mio tablet ha una larghezza di 2560x1600
— LeeGee,
36
Potrebbe essere così, ma i browser sui dispositivi mobili hanno un "rapporto pixel dispositivo". Qui è dove tratta ogni "pixel" logico come 2, 3 o anche più pixel effettivi sul tuo dispositivo. Altrimenti un 20px di altezza sarebbe molto piccolo e impossibile da premere, specialmente sullo schermo!
— Greg84,
6
@media solo schermo e (min-device-width: 480px) {} L'ho provato - si adatta anche ai desktop. E se volessimo solo un dispositivo mobile?
— Darius.V,
@ Darius.V, questo segue la mentalità "Mobile First", ciò significa che si avvia il mobile e quindi si apportano modifiche man mano che lo schermo si ingrandisce, quindi è necessario includere anche: @media only screen and (min-device-width: 1024){}o qualcosa del genere per ignorare queste modifiche. In alternativa, potresti farlo @media only screen and (MAX-device-width: 1024){}se hai iniziato con un design desktop e desideri apportare modifiche solo a cose più piccole di 1024.
— Steely
Ciò significa che il desktop non funzionerà con RWD a causa della larghezza minima del dispositivo. Consiglia di fare larghezza minima e niente basato sul dispositivo. Il vero responsive non dovrebbe richiedere un aggiornamento o un dispositivo limitato
— TheBlackBenzKid
50

  1. Ho usato questo sito per trovare la risoluzione e sviluppato CSS per numeri reali. I miei numeri variano abbastanza dalle risposte sopra, tranne per il fatto che il mio CSS effettivamente colpisce i dispositivi desiderati.

  2. Inoltre, disporre di questo codice di debug subito dopo la query multimediale, ad esempio:

    @media only screen and (min-width: 769px) and (max-width: 1281px) { 
  /* for 10 inches tablet screens */
  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;
  }
}

    Aggiungi questo elemento di debug in ogni singola query multimediale e vedrai quale query è stata applicata.

— user2060451
fonte
27

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

    }
— Santosh Khalse
fonte
25

Query multimediali per punti di interruzione del 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 */
}
— Purvik Dhorajiya
fonte
19
  1. Dispositivi extra piccoli (telefoni, fino a 480 px)
  2. Piccoli dispositivi (tablet, 768 px e superiori)
  3. Dispositivi medi (tablet, laptop e desktop di grandi dimensioni, 992 px e oltre)
  4. Dispositivi di grandi dimensioni (desktop di grandi dimensioni, da 1200 px e oltre)
  5. e-lettori di ritratti (Nook / Kindle), tablet più piccoli - larghezza minima: 481px
  6. tavolette per ritratti, iPad per ritratti, e-reader orizzontali - larghezza minima: 641px
  7. tablet, iPad orizzontale, laptop lo-res - larghezza minima: 961px
  8. HTC One larghezza dispositivo: 360px altezza dispositivo: 640px -webkit-device-pixel-ratio: 3
  9. Samsung Galaxy S2 larghezza dispositivo: 320px altezza dispositivo: 534px -webkit-device-pixel-ratio: 1,5 (min - moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (rapporto pixel-dispositivo min: 1,5
  10. Larghezza del dispositivo Samsung Galaxy S3: 320px altezza del dispositivo: 640px -webkit-device-pixel-ratio: 2 (min - moz-device-pixel-ratio: 2), - Browser Firefox precedenti (prima di Firefox 16) -
  11. Larghezza del dispositivo Samsung Galaxy S4: 320px altezza del dispositivo: 640px -webkit-device-pixel-ratio: 3
  12. LG Nexus 4 larghezza dispositivo: 384px altezza dispositivo: 592px -webkit-device-pixel-ratio: 2
  13. Asus Nexus 7 larghezza dispositivo: 601px altezza dispositivo: 906px -webkit-min-device-pixel-ratio: 1.331) e (-webkit-max-device-pixel-ratio: 1.332)
  14. iPad 1 e 2, iPad Mini larghezza dispositivo: 768px altezza dispositivo: 1024px -webkit-device-pixel-ratio: 1
  15. Larghezza dispositivo iPad 3 e 4: altezza dispositivo 768px: 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 320px: 480px -webkit-device-pixel-ratio: 2)
  18. Larghezza dispositivo iPhone 5: altezza dispositivo 320px: 568px -webkit-device-pixel-ratio: 2)
— Web designer e promotore
fonte
1
Solo schermo Sansung Galaxy S3 @media e (larghezza dispositivo: 720px) e (altezza dispositivo: 1280px) e (-webkit-min-device-pixel-ratio: 2) TESTATO e funzionato.
— user2060451
5

Non si tratta del numero di pixel, si tratta della dimensione effettiva (in mm o pollici) dei caratteri sullo schermo, che dipende dalla densità dei pixel. Quindi "min-width:" e "max-width:" sono inutili. Una spiegazione completa di questo problema è qui: che cos'è esattamente il rapporto pixel del dispositivo?

Le query "@media" tengono conto del conteggio dei pixel e del rapporto dei pixel del dispositivo, risultando in una "risoluzione virtuale" che è ciò che devi effettivamente prendere in considerazione durante la progettazione della tua pagina: se il tuo carattere ha una larghezza fissa di 10 pixel e la " risoluzione orizzontale virtuale "è di 300 px, saranno necessari 30 caratteri per riempire una linea.

— jumpjack
fonte
7
Grande. Quindi quali dovrebbero essere le query sui media?
— PKHunter,
4

Oggi la cosa più comune è vedere i dispositivi retina-screen, in altre parole: dispositivi con risoluzioni elevate e densità di pixel molto elevata (ma di solito inferiore a 6 pollici di dimensione fisica). Ecco perché avrai bisogno di retina per visualizzare 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

— Ezequiel Adrian
fonte
4

Dal momento che ci sono molte dimensioni dello schermo che cambiano sempre e molto probabilmente cambierà sempre il modo migliore per andare è quello di basare i tuoi punti di interruzione e le query multimediali sul tuo design.

Il modo più semplice per farlo è quello di prendere il tuo design desktop completo e aprirlo nel tuo browser web. Riduci lentamente lo schermo per restringerlo. Osserva quando il design inizia a "rompersi" o sembra orribile e angusto. A questo punto sarebbe necessario un punto di interruzione con una query multimediale.

È comune creare tre set di media query per desktop, tablet e telefono. Ma se il tuo design sembra buono su tutti e tre, perché preoccuparsi della complessità di aggiungere tre diverse media query che non sono necessarie. Fallo secondo necessità!

— Robert Rocha
fonte
3

Una funzionalità aggiuntiva è che puoi anche utilizzare le query multimediali nell'attributo multimediale del <link>tag.

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

Con questo, il browser scaricherà tutte le risorse CSS, indipendentemente dall'attributo media . La differenza è che se la media query dell'attributo media viene valutata su false allora quel file .css e il suo contenuto non saranno bloccati dal rendering.

Pertanto, si consiglia di utilizzare l' attributo media nel <link>tag poiché garantisce una migliore esperienza utente.

Qui puoi leggere un articolo di Google su questo problema https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Alcuni strumenti che ti aiuteranno ad automatizzare la separazione del tuo codice css in diversi file in base ai tuoi quesiti multimediali

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

— Juanma Menendez
fonte
2

Il comportamento non cambia sul desktop. Ma su tablet e cellulari, espando la barra di navigazione per coprire l'immagine del grande logo. Nota: utilizzare il margine (in alto e in basso) quanto basta per l'altezza del logo.

Nel mio caso, 60px in alto e in basso hanno funzionato perfettamente! 

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

Controlla la barra di navigazione qui .

— Pratik Khadloya
fonte
2
  • Dispositivi extra piccoli ~ Telefoni (<768px)
  • Piccoli dispositivi ~ Tablet (> = 768px)
  • Dispositivi medi ~ Desktop (> = 992px)
  • Dispositivi di grandi dimensioni ~ Desktop (> = 1200px)
— Bekzat
fonte
2

Sto usando quello che segue per fare il mio lavoro.

/* 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, 7, 8 ----------- */
@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+, 7+, 8+ ----------- */
@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 */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* 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 */
}
— Mayank Dudakiya
fonte
-1 
@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }
— Shailesh
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.