UPDATE
En Twitter Bootstrap utilizan las reglas de la siguiente manera:
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
En Stuff&Nonsense, Andy Clarke nos comparte un snippet de código CSS y HTML para utilizar las Media Queries de CSS3 para toda ocasión. Las Media Queries son útiles para poder manipular nuestro contenido de acuerdo al tamaño del layout en el que se despliega la página web.
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) { }
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) { }
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) { }
/* Large screens ----------- */
@media only screen and (min-width : 1824px) { }
/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) { }
También podemos utilizarlo de esta manera en HTML
<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)"/> <link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)"/> <link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)"/> <link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)"/> <link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)"/> <link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)"/> <link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)"/> <link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)"/>
Enlaces patrocinados
Hola.
Está muy bien, pero creo que falta lo principal:
Detectar el dispositivo, es decir, si es un ipad, un smartphone con android o un iphone y en base a eso discriminar y poner un css u otro.
En realidad no ofrece mucha solución.
David — noviembre 2, 2010 @ 4:34 am
He probado el and de min width y el orientation, pero no me va. En algunos foro´s dicen que el and de estos no va.
Que es tu experiencia?
Remko — noviembre 29, 2010 @ 9:25 am
a mi no me vale
ni con min-width ni con min-device-width
solo funciona en portrait, y debe ser casualidad y no que realmente va bien
viegues — mayo 7, 2012 @ 10:14 am
He provado y me ha funcionado, sin embargo, específicamente en Chrome, con windows xp, desktop, entra al media query que tiene min-device-width y max-device-width, en todos los demás deskop, en Chrome funciona.
¿alguna idea?
jocodina — septiembre 6, 2012 @ 11:09 am
@Jocodina, puedes probar usando las reglas que utiliza Twitter Bootstrap (las puse al principio del artículo) que son básicamente sin el «device» ni el «screen only», y estas están comprobadas. Saludos.
Rene Silva — septiembre 7, 2012 @ 11:35 am
Muy bueno
Hector — marzo 8, 2014 @ 5:04 pm
Puedes usar esto en las Css:
@media (min-width: 768px) and (max-width: 979px)
Antonio — diciembre 16, 2014 @ 5:06 am