Media Queries en CSS

Las media queries te permiten usar diferentes reglas CSS en función de la resolución o tamaño de la pantalla. Esto es uno de los pilares para el diseño web responsive que permite adaptar tu web a distintos dispositivos como una tablet, un móvil o un ordenador.

El uso de una media query

En este ejemplo vemos que en dispositivos de hasta 500px de anchura la cabecera de nuestra web no se mostrará.

Una de las utilidades es poder reestructurar nuestra web en función del tamaño de la pantalla. Un ejemplo típico es que en nuestra web el contenido que queremos que sea leído (un post) ocupe el 65% de la pantalla y el otro 35% tengamos una barra lateral donde podría ir nuestro índice, mapa, etc. Un ejemplo sencillo sería:

Pero en dispositivos móviles haría que nuestro contenido estuviera muy apretado. Lo podríamos mejorar haciendo que el contenido ocupara el 100% de la pantalla y la barra lateral que se nos mostrase después del contenido facilitando así la visibilidad (y también la usabilidad dado que los usuarios de dispositivos móviles estan muy acostumbrados a hacer scroll). Del ejemplo anterior, añadiríamos una media query en nuestro fichero css para que en dispositivos de resoluciones inferiores a 768 píxeles se mostrase cada parte ocupando el 100% de la pantalla:

The following two tabs change content below.
avatar

Raúl Vállez

Responsable técnico y cofundador en Samsaria
Ingeniero informático y compositor de música. Conocedor de varias tecnologías web: PHP, Zend, MySql, Oracle, Coldfusion y un poco de Java. Alternando la programación con la composición de música para medios audiovisuales y de BSO para cortometrajes.
avatar

Últimas entradas de Raúl Vállez

Etiquetado con: ,
Publicado en: CSS
2 comentarios sobre “Media Queries en CSS
  1. avatar Hosting dice:

    Media queries consist of an optional media type and can, as of the CSS3 specification, contain zero or more expressions, expressed as media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

Deja un comentario

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

*