CSS Media queries

Brindar comodidad en la visualización y soporte para diversos tamaños de pantalla, se ha convertido en una prioridad para todos los sitios web que desean crear gratas experiencias en el manejo de sus sistemas por parte del usuario final. Además con la popularización de internet desde el móvil, es más importante si cabe usar este tipo de recursos.

Con la variedad de dispositivos que actualmente existen en el mercado,  la web móvil, etc. el manejo adecuado del tamaño de pantalla y la manera en que se despliega el sitio es un factor determinante para que el usuario frecuente y utilice un sitio, ya que si este no puede ser observado correctamente su potencial se ve reducido.

Para lograr este soporte, en el pasado, era común recurrir a efectos y trucos que nos ofrecía JavaScript, para que de esa manera el sitio se ajustará a la medida de la ventana donde el usuario había abierto el sitio, o pero aún se modificaba arbitrariamente el ancho del navegador donde se desplegaba el sitio, actuando en contra de lo que el usuario realmente deseaba.

Afortunadamente en la actualidad este proceso se ha simplificado en gran manera, a tal grado que con un par de líneas podemos dar soporte a los tamaños de pantalla más utilizados por los usuarios, ya sea el tamaño de un monitor de escritorio, una tablet o un smartphone. Todo esto se ha conseguido gracias al uso de CSS y sus nuevas estandarizaciones, entre las cuales nos encontramos a los “media queries” quienes serán los que nos ayuden a llevar a cabo esta tarea.

Soporte de CSS media queries en navegadores

Antes de empezar con el desarrollo, debemos establecer que los métodos que vamos a explicar en este artículo sólo tendrán efecto en ciertos navegadores, si tu deseas dar soporte a todos los navegadores que aún están en uso por parte de los usuarios, entonces puedes tomar algún otro tutorial o conseguir un truco por Internet que te permita conseguir el mismo efecto mediante “hacks”, sólo recuerda que no hay que maritizarse mucho con esto pues es muy poco probable que un smartphone o una tablet venga con Internet Explorer 7 como navegador, puesto que son instrumentos relativamente recientes.

Los navegadores que soportan los Media Queries de CSS son Firefox en su versión 3.5 y posteriores, Google Chrome en todas sus versiones, Safari en su versión 3 y posteriores, Opera en la versión 9.5 y posteriores y finalmente Internet Explorer que los incorporó a partir de su versión 9.

Ahora que ya sabemos los navegadores donde se pueden utilizar hay que identificar en que partes del código podemos colocar los media queries.

Donde colocar los media queries

El método más común a utilizar es incluir nuestros media queries dentro de la hoja de estilo principal. Para llamarlos basta con incluir la etiqueta “@media” en nuestra sentencia.

Veamos la estructura:

@media screen and (min-width : 1024px){
      /* Aquí iría el estilo para este tamaño de pantalla */}

Como se puede observar en la sentencia utilizamos la palabra “screen” después de la etiqueta “@media”, esto sirve para indicar el formato al cual aplicaremos el estilo, este puede tener distintos valores como all, screen o print, en nuestro caso nos enfocaremos únicamente a “screen” ya que nos estamos refiriendo al tamaño de pantalla.

Después de establecer el formato damos la siguiente parte “min-width: 1024px”, con esto especificamos cual será el tamaño mínimo que deba tener la pantalla para que el estilo pueda ser aplicado, en este caso yo le di el valor de 1024 píxeles ya que es un estándar de tamaño de monitor para las computadoras de escritorio.

Si definimos una hoja de estilo como la siguiente:

<style>
#contenedor{
background: crimson;
width:200px;
height: 200px;
}

@media screen and (min-width : 1024px){
    #contenedor{
      background: blue;
    }
}
</style>

Al momento de abrir nuestra página veremos un bloque contenedor de fondo carmesí, pero al momento en que disminuyamos el tamaño el browser a una cantidad menor de 1024 píxeles de ancho el contenedor cambiará de color y ahora será azul.

Podemos lograr el mismo efecto llevando a cabo otras manera de llamado, como por ejemplo la importación de hojas de estilo específicas para cada tamaño.

Importando desde la hoja de estilo

Mediante la etiqueta “@import” podemos mandar llamar a un archivo CSS externo que contenga todas las características deseadas para un tamaño de pantalla específico. Supongamos que tenemos un css definido para los monitores de de computadoras de escritorio pequeñas, cuya anchura es de 600 px en adelante, si quisiéramos llamar a esa hoja de estilo bastaría con realizar la siguiente sentencia:

<style>
@import url( escritorioPequeno.css ) screen and ( min-width: 600px );
</style>

Hay que tener en cuenta que también podemos agregar reglas mediante la aplicación de una coma, al igual que se hace al utilizar varios selectores.

Enlace a una hoja de estilo

Si no queremos importar en la hoja de estilo podemos incluir la hoja directamente en el código HTML para eso hacemos el llamado mediante la etiqueta “link” estableciendo el atributo “media” para especificar el formato y la anchura.

<link rel="stylesheet" media="screen and (min-width: 600px)" href="escritorioPequeno.css" />

Rastreando un dispositivo específico

Finalmente si lo que deseas es rastrear por dispositivo puedes usar la propiedad “max-device-width“. Esto te permite llamar hojas de estilo que hayan sido hechas con la única finalidad de que la página se despliegue bien en otra clase de dispositivo.

Por ejemplo, si quisieramos mandar llamar una hoja de estilo para desplegar correctamente la página en un iPhone haríamos una llamada como la siguiente:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="dispositivoMovil.css" />