Uso básico CSS3 Media Queries para crear versiones web para móvil

Uso básico CSS3 Media Queries para crear versiones web para móvil

Con las reglas @media de CSS3 conseguimos mejorar la experiencia del usuario que entra en un site, independientemente del dispositivo que se use. Adaptando la web a las resolución y medidas del dispositivo que se esté usando, claro siempre y cuando tengamos las reglas para ese dispositivo en nuestro css.

Podremos definir conjuntos de estilos dependiendo de propiedades comunes de los dispositivos y se pueden ajustar propiedades específicas para el alto, ancho, la relación de aspecto, el número de colores disponibles, etc.

Hasta el momento necesitábamos JavaScript para obtener información del navegador del usuario y conocer el tamaño de la ventana. En CSS3 tenemos las media queries con las que podemos obtener bastante información de las propiedades del navegador o dispositivo que se está usando para acceder a nuestro site.

Las propiedades más importantes que tendremos que tener en cuenta para dispositivos móviles son las siguientes:

  • Aspect-ratio: Mira las dimensiones relativas del dispositivo expresadas como una relación de aspecto: 16:9 por ejemplo.
  • Width y height: Mira las dimensiones del área de visualización. Además pueden ser expresadas en valores mínimos y máximos.
  • Orientation: Mira si el layout es panorámico ( el ancho es mayor que el alto ) o vertical ( el alto es mayor que el ancho ). Esto nos permite ajustar los diseños para dispositivos con propiedades de giro de la pantalla como el iPhone, y otros smartphones y los tablets.
  • Resolution: Mira la densidad de los pixeles en el dispositivo de salida. Esto es especialmente útil cuando queremos aprovecharnos de las ventajas de los dispositivos que tiene una resolución mayor a 72 dpi.
  • Color, Color-index y monochrome: Encuentran el número de color o bits por color. Esto nos permite crear diseños específicos para dispositivos monocromáticos.
/* 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 */
}

Si no quieres meter todo los estilos css en un mismo archivo puedes segmentarlo en varios.

<head>

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

</head>

Navegadores que implementan los media queries

La ténica de los media queries es aceptada ya desde hace algún tiempo por la mayoría de los navegadores, como siempre Internet Explorer es el que da más problemas y sólo lo admiten las últimas versiones.

  • Safari 4+
  • Chrome 4+
  • Firefox 3.5+
  • IE9+

Dado que el uso de IE en los móviles es cada día más residual, en mi opinión la técnica de las “media queries” está lista para ser cada vez más ampliamente utilizada en el desarrollo web.

Enlaces de interés:

Documentación W3C http://www.w3.org/TR/css3-mediaqueries/

Fuente:http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Tags de búsquedas:

css3,@media screen and (max-width,media only screen,@media only screen,adaptar web a movil css,medidas media queries,adaptar web a movil con css,css para moviles,css para moviles 2012,media queries css3,landscape es solo en moviles,optimizar web media queries,media queries para todas las resoluciones,orientation dispositivo javascript,media queries para tablet smartphone y pc

Noticias relacionadas »

11 comentarios en Uso básico CSS3 Media Queries para crear versiones web para móvil

  1. Santos
    / Responder

    Estoy comenzando con blogger y me viene de perlas!

  2. Pingback: Parte 5. Newsletters para móviles - GraphicMail MéxicoGraphicMail México

  3. Pingback: Parte 5. Newsletters para móviles – GraphicMail México

  4. / Responder

    Muuuuito obrigada!

  5. / Responder

    gracias brother excelente. ya lo eh aplicado a mi blog de blogger

  6. Toni
    / Responder

    Hola,
    Estoy escribiendo mi primera web en html y css. Necesito justo hacer esto. El caso es que tengo dudas a la hora de redefinir mis estilos css para los media queries. Debo poner en todas 100% en width y heigth para el body. Perdonar mi ignorancia

  7. jaime
    / Responder

    muy buena referencia, pero… ¿sabrías decirme porqué para el ipad en vertical no me funciona?

    He añadido el fichero de los css de la web primero y dspués he añadido otro fichero css solo para la configuración del ipad.

    Dentro de este primero la opción horizontal (landscape) que lo reconoce perfectamente y detrás la opción vertical que no lo reconoce.
    He hecho varias pruebas y no lo reconoce cuando le pongo la condición: PORTRAIT.

    PD.- Intenté usar lo de segmentar los ficheros según las condicionantes del último ejemplo y no me funcionaba así que lo he hecho como te comenté anteriormente.

    • jaime
      / Responder

      Una prueba más reveladora a la par que desconcertante:

      Mis CSS:
      1º Web tradicional
      2º Ipad horizontal
      3º Ipad vertical
      -NO FUNCIONA-

      Cambio a esto:
      1º Web tradicional
      2º Ipad horizontal
      3º Ipad (sin restricción de posición)

      Si pongo el ipad en horizontal me está tomando los css del 2º y 3º caso. Por lo tanto entra, como es lógico, en la 3ª configuración.

      PERO cuando lo pongo en vertical tan solo está tomando los css de la 1ª configuración !!! Ni si quiera entra en la 3ª configuración! :O

      ¿Quién es capaz de saber porqué? :O Gracias

  8. Emilio
    / Responder

    Excelente post, justo necesitaba eso. Gracias

  9. Pingback: Lay-Out & responsive | Fuzzy Logic

  10. / Responder

    excelente!!!, loaguardo en mis favoritos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

10$ gratis con Digital Ocean »

Este blog está funcionando con Digital Ocean,
para todos los lectores 10$ gratis! para probar el cloud a través del siguiente enlace.


Ir a Digital Ocean

¡Comparte este artículo! »

Sígueme en Facebook »

  • Pedro Ventura (11 horas)
    Hola Eli, Esos tags de búsquedas se incluyen automáticamente en…
  • reformas piso zaragoza (2 días)
    Fantastico post. Gracias por compartirlo...Espero màs... Saludos
  • Pedro Ventura (2 días)
    Hola Roy, Puedes consultar las comisiones en su página oficial:…
  • Roy (2 días)
    Supongo que la plataforma indica la comision que cobran. De…
  • eli (3 días)
    si los libros que recomiendas están en inglés, pq entre…
  • Curro (1 semana)
    Gracias pive muy buen trabajo con este post, esta curradisimo,…

Suscríbete al newsletter »

Proporciona tu correo electrónico a continuación y recibe las últimas noticias! Funciona con Feedburner de Google

Archivo »

profile for Pedro Ventura on Stack Exchange, a network of free, community-driven Q&A sites

Leer entrada anterior
Como eliminar el hack o malware de rr.nu de WordPress

Desde hace un tiempo que se me había infectado todo el blog, basado en Wordpress, con una especie de malware...

Cerrar