10 Jul

Media Queries

media_queries_cabureweb

Las Media Queries en el diseño y desarrollo web son un módulo de CSS3 que  permite adaptar la presentación del contenido en un sitio web a cualquier dispositivo (celulares, tablets) sin tener que cambiar el contenido en sí.

Se convirtió en un estándar recomendado por la W3C en Junio del 2012 y es una de las bases de lo que se conoce como Diseño Web Responsivo o Responsive Web Design.

Con media queries en nuestros sitios podemos brindar la mejor experiencia para el usuario, ya que se entregan estilos específicos para cada dispositivo.

Técnicamente una media query es una expresión lógica que puede ser verdadera o falsa. Consiste en un media type y cero o más expresiones que checkean por un media feature en particular.

@media all and (orientation: portrait) { … }

@media screen { … }

Las media queries tienen varias expresiones a utilizar, las más interesantes para el responsive design son:

  • orientation: Se refiere a la orientación (horizontal o vertical), acepta los valores landscape o portrait, landscape si la ventana es más ancha que alta y portrait si es más alta que ancha.
  • resolution: El valor que toma es la densidad de la pantalla en valor de puntos por pulgada (dpi) o en puntos por pixel (dppx). Su uso principal es para cambiar los background de imágenes según el dispositivo sea de alta resolución (como los retina display, iphone, …) o normal para que no se carguen más datos de los necesarios.
  • width: El ancho del dispositivo. Se permiten las variantes min-width y max-width. Es la principal expresión para el responsive design.

En próximas publicaciones seguiremos hablando de los nuevos componentes del diseño web moderno.

Sobre el autor

Juan
Aqui la breve descripcion de cada uno ...

Dejar una respuesta