Media Queries de CSS3 para todo uso

Publicado el 6 de octubre, 2010

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)"/>

Hola! Soy un Desarrollador Web, trabajo con frameworks PHP y Tecnologías Front-End.

Ver todos mis artículos »

     

Comentarios

  1. 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

  2. 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

  3. 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

    vieguesmayo 7, 2012 @ 10:14 am

  4. 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

  5. @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 Silvaseptiembre 7, 2012 @ 11:35 am

  6. Muy bueno

    Hector — marzo 8, 2014 @ 5:04 pm

  7. Puedes usar esto en las Css:

    @media (min-width: 768px) and (max-width: 979px)

    Antonio — diciembre 16, 2014 @ 5:06 am

Trackbacks

  1. Bitacoras.com