Punti di interruzione media comuni per i media CSS

Sto lavorando su un sito Web reattivo con query multimediali CSS.

La seguente è una buona organizzazione per i dispositivi? Telefono, Ipad (Orizzontale e verticale), Desktop e laptop, Schermo grande

Quali sono i valori dei punti di interruzione dei media comuni?

Sto pianificando di utilizzare i seguenti punti di interruzione:

  • 320: Ritratto smartphone
  • 481: Smartphone Landscape
  • 641 o 768 ???: IPad Portrait ???
  • 961: IPad Landscape / Small Laptop ???
  • 1025: desktop e laptop
  • 1281: Wide Screen

Cosa ne pensi? Ho qualche dubbio come ??? punti.

Piuttosto che cercare di indirizzare le regole @media su dispositivi specifici, è probabilmente più pratico basarle sul tuo particolare layout. Cioè, ridurre gradualmente la finestra del browser desktop e osservare i punti di interruzione naturali per i tuoi contenuti. È diverso per ogni sito. Finché il design scorre bene ad ogni larghezza del browser, dovrebbe funzionare in modo affidabile su qualsiasi dimensione dello schermo (e ce ne sono molti e molti là fuori).

Sto usando:

@media only screen and (min-width: 768px) { /* tablets and desktop */ } @media only screen and (max-width: 767px) { /* phones */ } @media only screen and (max-width: 767px) and (orientation: portrait) { /* portrait phones */ } 

Mantiene le cose relativamente semplici e ti permette di fare qualcosa di un po ‘diverso per i telefoni in modalità verticale (un sacco di volte mi ritrovo a dover cambiare vari elementi per loro).

Sto usando 4 punti di rottura, ma come ha detto Ralph.m ogni sito è unico. Dovresti sperimentare. Non ci sono punti di rottura magici a causa di tanti dispositivi, schermi e risoluzioni.

Ecco cosa uso come modello. Sto controllando il sito Web per ogni punto di interruzione su diversi dispositivi mobili e l’aggiornamento dei CSS per ogni elemento (ul, div, ecc.) Non viene visualizzato correttamente per quel punto di interruzione.

Fino a quel momento stavo lavorando su più siti web responsive che ho realizzato.

 /* SMARTPHONES PORTRAIT */ @media only screen and (min-width: 300px) { } /* SMARTPHONES LANDSCAPE */ @media only screen and (min-width: 480px) { } /* TABLETS PORTRAIT */ @media only screen and (min-width: 768px) { } /* TABLET LANDSCAPE / DESKTOP */ @media only screen and (min-width: 1024px) { } 

AGGIORNARE

A settembre 2015 ne sto utilizzando uno migliore. Scopro che questi punti di interruzione di media query corrispondono a molti più dispositivi e risoluzioni dello schermo del desktop.

Avere tutti i CSS per desktop su style.css

Tutte le query multimediali su responsive.css: tutto il CSS per il menu sensibile + punti di interruzione del supporto

 @media only screen and (min-width: 320px) and (max-width: 479px){ ... } @media only screen and (min-width: 480px) and (max-width: 767px){ ... } @media only screen and (min-width: 768px) and (max-width: 991px){ ... } @media only screen and (min-width: 992px) and (max-width: 1999px){ ... } 

Questo è dal link css-tricks

 /* 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 */ } /* 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 (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 

Posso dirti che sto usando solo un singolo breakpoint a 768 – che è min-width: 768px per servire tablet e desktop e max-width: 767px per servire i telefoni.

Da allora non ho più guardato indietro. Rende facile lo sviluppo reattivo e non è un lavoro ingrato, e fornisce un’esperienza ragionevole su tutti i dispositivi a costi minimi per il tempo di sviluppo senza la necessità di temere un nuovo dispositivo Android con una nuova risoluzione in cui non è stato preso in considerazione.

Prendi in considerazione l’uso dei break point di twitter bootstrap . con un tasso di adozione così massiccio dovresti essere al sicuro …

Media query per dispositivi standard

In generale per dispositivi mobili, tablet, desktop e schermi di grandi dimensioni

1. Cellulari

  /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } 

2. compresse

 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } 

3. Desktop e laptop

 @media only screen and (min-width : 1224px) { /* Styles */ } 

4. Schermi più grandi

 @media only screen and (min-width : 1824px) { /* Styles */ } 

In dettaglio, incluso paesaggio e ritratto

 /* 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 */ } /* Tablets, iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* Tablets, iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* Tablets, iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* 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 (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 

Riferimento

 @media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/} @media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/} @media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/} @media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/} @media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/} @media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */} 

Io uso sempre Desktop prima, il primo cellulare non ha la priorità più alta, vero? IE <8 mostrerà i css mobili ..

 normal css here: @media screen and (max-width: 768px) {} @media screen and (max-width: 480px) {} 

a volte alcune dimensioni personalizzate. Non mi piace il bootstrap ecc.

Se vai al tuo google analytics puoi vedere quali risoluzioni dello schermo utilizzano i tuoi visitatori del sito web:

Pubblico> Tecnologia> Browser e sistema operativo> Risoluzione schermo (nel menu sopra le statistiche)

Il mio sito riceve circa 5.000 visitatori al mese e le dimensioni utilizzate per la versione gratuita di responsinator.com sono un riepilogo abbastanza accurato delle risoluzioni dello schermo dei miei visitatori.

Questo potrebbe salvarti dal dover essere troppo perfezionista.

Invece di usare i pixel dovrebbe usare em o percentuale in quanto è più adattabile e fluida, meglio non indirizzare i dispositivi ai tuoi contenuti:

I rockstar HTML5 leggono, prima i cellulari

I tuoi punti di rottura sembrano davvero buoni. Ho provato 768px su tablet Samsung e va oltre, quindi mi piace molto il 961px . Non è necessario averli tutti necessariamente se si utilizzano tecniche CSS reattive, come % width/max-width per i blocchi e le immagini (anche il testo).

Mantieni il tuo codice pulito e fogli di stile separati logicamente per schermo ‘media’ tipo config …

1) Utilizzare la risposta di himansu dall’alto come riferimento: punti di interruzione media comuni di query sui CSS
E
2) https://www.w3schools.com/css/css3_mediaqueries.asp

la tua risposta sarebbe: