Quali sono le larghezze migliori per utilizzare le query multimediali per indirizzare gli orientamenti di orientamento verticale e orizzontale su dispositivi diversi? Ci sono degli standard?Larghezze da utilizzare nelle query multimediali
Sto cercando ovunque la migliore risposta per questo. Ecco cosa ho trovato.
@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 */ }
Penso che questo sia meglio considerare con il primo approccio mobile. Inizia dal foglio di stile mobile e quindi applica le query multimediali pertinenti per altri dispositivi. Grazie per @ryanve. Ecco lo link.
So che la domanda riguarda le migliori larghezze (e questo set è buono come qualsiasi), ma i display ad alta risoluzione non sono definiti dalle larghezze ma dalla loro risoluzione (rapporto dispositivo-pixel). Ci sono anche mediaqueries. – brennanyoung
Trovo che questi siano buoni punti di partenza per iniziare, ma sempre testare e modificare mentre si procede. Vorrei anche suggerire utilizzando ems invece di px per le dimensioni per svariate dimensioni dei dispositivi e le risoluzioni (motivi descritti qui (http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/))
Quindi le query di cui sopra sarebbe simile a questa:
@media (min-width:20em) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:30.063em) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:40.063em) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:60.063em) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:64.063em) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:80.063em) { /* hi-res laptops and desktops */ }
C'è anche una calcolatrice nifty pixel in em qui online (http://pxtoem.com/) Per quelli di voi non così familiari, incluso me stesso.
Grazie a @Terri per le tue informazioni, non ho mai provato il responsive design con em. Vale la pena provare questo se si hanno questi vantaggi con em invece di px. non mi è familiare, ma tutto quello che vuoi fare è convertire px in em. È fantastico! – Nishantha
Questa è una risposta ben intenzionata ma alquanto incompleta. Le misure 'em' dipendono interamente dalla dimensione del carattere attualmente in uso. (Se la dimensione del font dell'elemento in questione è '200px', quindi' 1em' = '200px') Poiché questo non è coerente tra tutti gli stili di siti web, i valori' em' forniti in questa risposta sono solo esempi e potrebbero non funziona bene con il tuo codice. – rinogo
Prova questo compreso retina
/* 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 */
}
Questo è un ottimo modello di lavoro per tutte le query multimediali. Grazie! – eggmatters
Prova questo media query vi aiuterà a
@media only screen and (min-width:1280px) {}
@media (min-width:1024px) and (max-width:1279px) {}
@media (min-width:768px) and (max-width:1023px) {}
@media (min-width:480px) and (max-width:767px) {}
@media screen and (max-width:479px) {}
@media only screen and (max-width:320px) {}
@media only screen and (max-width:767px) {}
perfetta media query
@media (max-width:400px) {}
@media (min-width:401px) and (max-width:599px) {}
@media (min-width:600px) and (max-width:767px) {}
@media (min-width:768px) and (max-width:950px) {}
@media (min-width:951px) and (max-width:1050px) {}
@media (min-width:1051px) {}
Non proprio. Dipende dal tuo contenuto. Il tuo sito ha un bell'aspetto con una certa risoluzione? Non c'è bisogno di aggiungere una query multimediale lì. Rendere più piccolo (o più grande) qualcosa o renderlo sub-ottimale? Aggiungi un breakpoint per quella larghezza. Dovresti prima pensare ai contenuti, piuttosto che al dispositivo. –
dstorey, grazie per la risposta. Sì, hai ragione "Prima dovresti pensare ai contenuti, piuttosto che al dispositivo". Ma qui ho trovato su Stackoverflow ciò che @doubleJ pensa [link] (http://stackoverflow.com/a/11275644/2408913). C'è qualche suggerimento almeno su quali sono le larghezze principali su cui dobbiamo concentrarci? grazie .. – Nishantha
Penso che quelli siano eccessivamente restrittivi e aggiungano ridondanza o complessità, e hanno anche perso i dispositivi più piccoli di 320 che sono ancora popolari nei paesi in via di sviluppo. Se si dispone di una sorta di layout liquido, la maggior parte di questi non avrebbe comunque bisogno di regole CSS aggiuntive. –