¿Cómo escribirías consultas de medios para múltiples tamaños de pantalla?

Question

si quiero

body {font-size:18 px} para 1900 y por encima de

body {font-size:16 px} para 1024 y 1900

body {font-size:14 px} para 768 a 1023

body {font-size:12 px} para 320 a 767

body {font-size:11 px} durante 0 a 320

Acabo de dar y un ejemplo para la pregunta.

Answer 1

Esto debería hacer el trabajo

@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; } } 

Answer 2

Me encanta this blog/website, ya que es un buen recurso para CSS3 y trucos ingeniosos:

/* 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 */ 
} 

Answer 3

Usted podría utilizar preguntas de los medios. Por ejemplo, su tamaño de fuente para 1024-1900 se establece así:

@media screen and (max-width: 1900px){ 
    body{font-size:16px;} 
} 

Para una explicación más detallada ver el diseño web receptivo: http://www.alistapart.com/articles/responsive-web-design/

Answer 4

aplicación de este código.

@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} }