Se voglioCome scriverei query multimediali per più dimensioni dello schermo?
body {font-size:18 px} per il 1900 e al di sopra
body {font-size:16 px} per 1024 e 1900
body {font-size:14 px} per 768 al 1023
body {font-size:12 px} per 320 al 767
body {font-size:11 px} per 0-320
Ho appena dato ed esempio per la domanda.
Questo dovrebbe fare il lavoro
@media only screen and (min-width: 320px) { body{ font-size: 12px; } }
@media only screen and (min-width: 768px) { body{ font-size: 14px; } }
@media only screen and (min-width: 1024px) { body{ font-size: 16px; } }
@media only screen and (min-width: 1900px) { body{ font-size: 18px; } }
amo this blog/website, in quanto è una buona risorsa per CSS3 e nifty trucchi:
/* 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 */
}
La larghezza del dispositivo deve essere utilizzata per dispositivi mobili e tablet? –
Penso che vari per tablet, in quanto alcuni si comportano come browser per dispositivi mobili (iPad, ad esempio) e altri no. – Blender
Si potrebbe utilizzare le media query. Per esempio la dimensione dei caratteri per 1024-1900 verrebbe impostato in questo modo:
@media screen and (max-width: 1900px){
body{font-size:16px;}
}
Per una spiegazione più approfondita si veda responsive web design: http://www.alistapart.com/articles/responsive-web-design/
Non sovrascriverà ad altre dimensioni dello schermo inferiori? –
Loro l'ho scritto, sì. Dovresti scrivere altri selettori per risoluzioni minori o aggiungere un 'e (larghezza minima: 1200px)' – hradac
applicato questo codice.
@media only screen and (max-width:319px) { body{font-size:11px}}
@media only screen and (min-width:320px) and (max-width:767px) { body{font-size:12px} }
@media only screen and (min-width:768px) and (max-width:1023px) { body{font-size:14px} }
@media only screen and (min-width:1024px) and (max-width:1899px) { body{font-size:16px} }
@media only screen and (min-width:1900px) { body{font-size:18px} }
Perché si sta utilizzando 'solo schermo' e ho visto alcune persone utilizzare' max-larghezza'. –
Si può sempre includere anche un foglio di stile diverso per ogni risoluzione dello schermo. O semplicemente ridimensionare tutto in base agli EM. Controlla questo per riferimento. http://css-tricks.com/css-media-queries/ – wwwroth
Ricorda che hai ancora bisogno di selettori all'interno dei blocchi multimediali. Quindi non sarebbe solo 'font-size: 12px' che vorrebbe' @media solo schermo e (min-width: 320px) {body {font-size: 12px}} ' – hradac