Responsive Web Design 2 – Media Query

Diseño Web 30 mayo 2017

RWD Media Query

En el artículo anterior de Responsive Web Design, estuvimos viendo las medidas con las que se rige cualquier web para empezar a trabajar y ver cómo poder medir lo que mostramos en la web. En este artículo vamos a ver los Media Query.

Definición Media Query

Media Query es un módulo que se ha empezado a utilizar en CSS3. A través de ellos podemos adaptar el contenido de nuestra web a los diferentes tamaños de pantallas en los que se muestra. Es decir, podremos controlar cómo mostramos la información según el tamaño de la pantalla en la que se muestra.

Con este acercamiento a la definición, ya vemos lo importante que va a ser para nuestra página web.

Explicación de Media Query

@media only screen and (max-width: 480px) and (min-resolution: 300dpi), (orientation: landscape) {
     body {
     font-size: 12px;
}

A través de este ejemplo vamos a ver qué hace cada uno de los elementos que componen el media query, cómo funcionan y para qué sirven. Hay que tener en cuenta que este media query es difícil verlo, ya que es muy complejo. Pero vamos a verlo tan complejo para ver todas las opciones posibles. Y al final ver algún ejemplo práctico.

@media

Es la instrucción de CSS para indicar que nos vamos a encontrar con un media query. Esto por tanto es obligatorio siempre empezar por esto.

Only

Es un indicativo que indica que el media query solo tiene que afectar a algo en concreto. En este caso screen que es lo que le sigue. Pero only se puede añadir o no, es algo que se puede utilizar según la necesidad que se tenga en cada momento.

Screen

Se utiliza para indicar a qué tipo de dispositivo es a lo que tiene que afectar. Y me refiero al tipo de dispositivo porque tiene otras opciones como pueden ser print o handheld.

  • Print: se utiliza cuando se va a imprimir la pantalla.
  • Handheld: se utilizaba al principio para los dispositivos móviles, pero hoy en día ya no es necesario distinguir entre screen y este último.
  • Por ello, casi el 100% de las veces utilizaremos screen, pero es bueno conocer las otras dos opciones, por si lo vemos en cualquier lugar saber de qué son.

And y “,”

And como vemos es un aditivo, es decir, es algo que nos indica que para que se lleve a cabo todas las reglas de css que tengamos dentro, se tienen que cumplir los dos requisitos. En este caso que sea una pantalla, más de 480px y una resolución mínima de 300dpi.

Después de la resolución mínima tenemos una coma “,”. Este es el operador contrario a And, ya que su significado es “este o este”. Es decir, se puede cumplir la regla cuando alguno de los dos sea correcto. En el ejemplo anterior es si la resolución es mínima de 300dpi o la orientación sea landscape.

Como he dicho antes, no es el mejor ejemplo, pero en los ejemplos de abajo se ve más claramente.

(max-width: 480px;)

El requisito del tamaño de la pantalla. Se puede jugar con un máximo o un mínimo. En este caso se está diciendo que afectará a aquellos que tengan un máximo de 480px.

Esta es la forma más común de llevar a cabo los condicionales, ya que vas a jugar con el tamaño de la pantalla. Se puede jugar con dos a la vez, por ejemplo que sea un mínimo y tenga un máximo para aplicarse en un rango concreto.

(min-resolution: 300dpi)

Estamos hablando de los píxeles por pulgadas de la pantalla. En este caso se está solicitando que el mínimo sea de 300 ppp.

(orientation: landscape)

Landscape indica que el formato de la pantalla tiene que ser horizontal, a modo de paisaje. Mientras que la otra opción es portrait, que sería vertical.

Es algo que se utiliza mucho para dispositivos móviles, es la aplicación más cercana que podemos encontrar.

Ejemplos Media Query

Ejemplos Media Query

@media only screen and (max-width: 480px) {
     /* CSS para pantallas menores de 480px*/
}

@media only screen and (min-width: 481px) and {max-width: 960px} {
     /* CSS para pantallas entre 481px y 960px */
}

@media only screen and (min-resolution: 300dpi) {
     /* CSS para pantallas con una resolución minima de 300dpi (píxeles por pulgada) */
}

@media only screen and (min-width: 480px), (orientation: landscape) {
     /* CSS para pantallas con un ancho mínimo de 480px y que estén en orientación o formato horizontal */
}

Dónde situar Media Query

Los media query siempre se utilizan en tu archivo de CSS. Y se sitúan al final de todas las reglas. Ya que hay unas reglas para toda la web, y en la última parte vamos a ir especificando y modificando algunas reglas en concretas para los tamaños de dispositivos.

Por ello, hay que situarlos al final, ya que si se hiciera de otra forma se sobrescribirían los estilos y no se reproduciría correctamente en la web.

Conclusiones

La principal es que son fundamentales para cualquier web responsive. Son los que hacen que se pueda adaptar cualquier web a cualquier dispositivo. Por ello, son muy básicos para cualquier diseñador web.

Antes de su llegada se hacían estilos separados para cada sistema, uno para móvil y otro para sobremesa, y se reconocían estos dispositivos a través de javascript. Con los media query todo esto cambió, y cambió para mejor ya que son capaces de ahorrarte código, algo que es una gran ventaja.

Datos del artículo
Responsive Web Design 2 - Media Query
Título
Responsive Web Design 2 - Media Query
Descripción Breve
En este artículo hacemos la segunda entrega del Responsive Web Design RWD con los Media Query. La forma de trabajar con la forma de visualización de nuestra web a través de nuestros CSS.
Autor
Publicado en:
aexpositogonzalez.com
Logotipo:

Deja un comentario

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