Cómo utilizar las Media Queries de CSS3 para mejorar la visualización de nuestros proyectos web

Las Media Queries son una de las grandes ventajas de CSS3, ya que permiten saber qué sistema se está visualizando una página web y, en función de ello, aplicar unas reglas de estilo u otras.  Así, podemos servir un CSS personalizado, acorde las condiciones del navegador o dispositivo que nos visita. Como veremos a continuación, se han convertido en uno de los mejores recursos con los que cuentan los diseñadores para hacer sitios responsive.

Utilizar las Media Queries de CSS3 es  muy sencillo, como todo el lenguaje CSS en general. De una manera descriptiva podemos indicar una condición y a continuación los estilos que deben aplicarse cuando ésta se cumpla. Para aclarar su sintaxis veremos una serie de ejemplos útiles e ilustrativos.

Podemos usarlas con tranquilidad, puesto que todos las soportan. Solo versiones muy antiguas de Internet Explorer tendrán problemas con ellas, de IE8 para abajo.

Medios

Con Media Queries podemos detectar el medio donde se está consumiendo un sitio web.

@media screen {
 h1 {
 color: red;
 }
 }
@media print {
 h1 {
 color: black;
 }
 }

En estos ejemplos tenemos media queries sencillas, en las que se distingue el modo en el que se está consumiendo la página, en una pantalla o en la impresora.

Tamaños de pantalla

Lo más común es que usemos las Media Queries para detectar las dimensiones de la pantalla.

@media (min-width: 1000px) {
 body {
 align: 20px;
 }
 div {
 text-align: center;
 }
 }

Con este ejemplo, estamos aplicando una serie de estilos, que se tendrán en cuenta solamente cuando la anchura de la pantalla sea de 1000px en adelante.

@media (max-width: 320px) {
 body {
 font-size: .6em;
 }
 }

En este caso, indicamos que la anchura de la pantalla debe de ser 320 píxeles de máximo para que se apliquen los estilos.

Orientación

También es útil para definir estilos en función de la orientación, lo que resulta especialmente adecuado para el diseño para móviles.

@media (orientation:landscape){
 body{
 background-image:url(archivo.jpg);
 }
 }
 @media (orientation:portrait){
 body{
 background-image:url(archivo-pantalla-en-vertical.jpg);
 }
 }

Landscape es el valor de la orientación cuando la pantalla está en horizontal y portrait para la pantalla en vertical.

Combinar condiciones

En las especificaciones de Media Queries de CSS3 se definen muchas otras condiciones que se puede analizar para distinguir el cliente que nos está visitando, como la profundidad del color, densidad de píxeles, resolución, etc. No todas estarán disponibles en todos los navegadores y, generalmente, las más utilizadas son las que hemos nombrado ya en este artículo.

Para acabar, sólo nos queda ver algún ejemplo sobre cómo se pueden combinar estas condiciones. Por ejemplo, que se apliquen estilos únicamente para pantallas con ciertas dimensiones, o para ciertas dimensiones cuando el dispositivo está en vertical, o impresoras de determinada resolución…

Esta regla aplicaría en dispositivos que se usan en la mano y con dimensiones mínimas de 30em.

@media handheld and (min-width: 30em) {
 body {
 color: #666;
 }
 }

Esta regla aplicaría en cualquier medio con dimensiones entre 800 y 1200 píxeles.

@media (min-width: 800px) and (max-width: 1200px) {
 .item {
 display: none;
 }
 }

Si dierente Media Queries son válidas para un entorno y surgen conflictos, éstos se resolverían por la norma de la cascada, de modo que las últimas reglas de estilo definidas serían las que se tendrían en cuenta.

Compartir

Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

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