"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Media queries

Si hablamos de web responsive hablamos de media queries, ya que es gracias a ellas que nuestra web puede ir adaptandose a distintos dispositivos y resoluciones.

Antes de que las media queries existieran la unica manera de hacer que una web se adaptara a la resolucion del dispositivo era crear paginas distintas lo cual implicaba tener que mantener tantas paginas como canales o resoluciones quisieramos, algo sin duda muy costoso en cuanto al tiempo que debiamos dedicarle, y peligroso en cuanto a la integridad del contenido en sus distintas versiones.

Las media queries permiten que una misma pagina pueda aplicar una serie de estilos en funcion de donde o a que resolucion se este visualizando.

Casos de uso

Exiten varias maneras de declarar una media querie, la primera seria en el propio link del elemento de esta manera

<link rel="stylesheet" media="(max-width: 1024px)" href="main.css" />

Pero también podriamos declararlas en el interior de la propia hoja de estilos así

@media (max-width: 1024px) {
  body {
    background-color: white;
  }
}

Ambas formas son correctas, la primera tiene como ventaja que permite tener aislado en una hoja de estilos todas las reglas para ciertas condiciones, de manera que solo descarga la hoja necesaria y es una manera mas visual y ordenada, pero si tenemos muchas casuisticas que se cruzan podemos penalizar el rendimiento pues tendríamos que hacer muchas peticiones.

La segunda manera tiene como ventaja que podemos declarar tantas media queries como queramos lo que otorga más potencia, pero si empezamos a escribirlas sin ningun control nuestra hoja de estilos puede crecer mucho y ser dificil de mantener, a mi parecer esta ultima manera es la mejor pero en vez de picar codigo css directamente es mejor usar un preprocesador como sass y ahi hacer los distintos modulos (partials o páginas independientes donde se declaren cada una de estas queries) que luego den como resultado la hoja definitiva que llevaremos a la pagina, es mi opinión…

Mobile First

Aunque se trata de un concepto, esta muy relacionado con el tema del que estamos hablando, esta filosofia propone que primero debemos programar para resoluciones pequeñas y despues ir hacia resoluciones mayores.

Sin duda tiene lógica, aunque no todos están de acuerdo con que sea la mejor solución, el argumento que se da para hacerlo así es que conseguimos crear una versión ligera para los dispositivos móviles en donde el navegador solo aplica las primeras líneas de CSS, mientras que la carga de leer toda la hoja de estilos sobrescribiendo las líneas marcadas en las media queries queda para los dispositivos con mayor resolución, que se espera tengan una conexión a internet más rápida y una capacidad de procesamiento mayor.

Sintaxis

Según la pagina de w3school la sintaxis correcta a la hora de escribirlas es:

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
@media not|only mediatype and (media feature) {
    CSS-Code;
}

Si deseas ver la información en la propia página solo tienes que visitar este link, como se puede apreciar hay varios elementos que podemos encontrar a al hora de escribirlas y estos son los operadores, los mediatype y los media features, a continuación veamos que es cada uno y que posibilidades ofrecen.

Operadores

Dentro de las media queries podemos tener distintos operadores estos son ‘,’, not, and, only.

El primero es usar ‘,’ como un separador, este equivale al operador lógico or, de manera que al separar distintas condiciones dentro de una media querie con comas estamos diciendo que aplique esos estilos si se cumple alguna de esas condiciones, en la practica sería lo mismo que escribirlas por separado.

@media (min-width: 1024px), (orientation: landscape) { ... }

Las reglas que declaremos los dentro de ella se aplicarán cuando la ventana de nuestro de navegador tenga al menos 1024px o cuando la ventana sea mas ancha que alta, en la siguiente tabla se proponen 4 resoluciones distintas para la ventana y si se aplican o no los estilos para este caso…

ANCHO ALTO FUNCIONA
1920 1080 SÍ ( por ser mayor de 1024 o por ser landscape )
1920 2000 SÍ ( por ser mayor de 1024 )
800 600 SÍ ( por ser landscape )
800 850 NO

El operador not aplica los estilos unicamente si la condicion que luego declaramos es falsa, veamos un ejemplo

@media not screen and (min-width: 768px) { ... }

Los estilos se aplican cuando el ancho es menor de 768px (sería equivalente a haber declarado @media screen and (max-width: 767px))

El operador only se usa para aplicar un estilo sólo si el Query completo es correcto, y es usado para prevenir de cargar el estos estilos a aquellos navegadores que no soportan las media queries.

El operador and se usa para asociar multiples condiciones a la media query de manera que solo apliquen esos estilos cuando TODAS esas condiciones se cumplan, volviendo al ejemplo que teniamos arriba con el operador or, si lo cambiaramos por una and asi

@media (min-width: 1024px), (orientation: landscape) { ... }

Los estilos solo se aplicaría para ventanas de un ancho igual o superior a 1024px y que además sean landscape, es decir que pasamos de que se cumpla alguna de las dos condiciones a que se tengan que cumplir las dos, así quedaría la tabla con las resoluciones de prueba…

ANCHO ALTO FUNCIONA
1920 1080 SÍ ( por ser mayor de 1024 y ser landscape )
1920 2000 NO
800 600 NO
800 850 NO

Los mediatypes

Estos sirven para definir a que tipo de dispositivos afectan los estilos, por defecto el valor que toma es «all» es decir que se ejecuta para todo tipo, pero existen otros, a dia de hoy muchos se encuentran deprecados y ya nos los voy a mencionar, los demás son:

all para todos los dispositivos
print para dispositivos que se encuentren en vista de impresion o a la hora de imprimir
screen para las pantallas de ordenador, tablets o smartphones
speech para medios hablados (viene a sustituir al antiguo mediatype ‘aural’)

Un ejemplo de uso es el siguiente código:

<link rel="stylesheet" type="text/css" media="all" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

En donde la primera hoja de estilos se ejecuta siempre y la segunda solo cuando intentamos imprimir la pagina…

Las media features

Ya hemos visto arriba algunas, basicamente son las funcionalidades o parametros que se evaluan, un ejemplo sería la funcion width que evalua el ancho de la ventana, si se corresponde con el que le indicamos devuelve un true y sino un false, además muchas de ellas van precedidas de ‘min-‘ o de ‘max-‘ que equivale a preguntar si tiene al menos X o si tiene como maximo X.

Aunque hay bastantes las que mas suelo utilizar son:

width y device-width que sirven para indicar el ancho de la ventana y el ancho del dispositivo, la diferencia es evidente, la ventana de un navegador la podemos redimensionar y veremos en tiempo real como van cogiendo las distintas media queries, podemos usar los prefijos min y max en ambos casos.

height y device-height, igual que el anterior pero representando la altura en este caso.

orientation que determina si nuestra ventana es mas ancha que alta (landscape) o si por el contrario es mas alta que ancha (portrait), aqui los prefijos no se usan.

resolution que sirve para saber las resolucion del dispositivo expresado en la concentracion de pixels por cierta unidad de medida, por ejemplo:

/*Se aplican los estilos si la resolucion es de al menos 300 puntos por pulgada*/
@media print and (min-resolution: 300dpi) { ... }

/*Se aplican los estilos si la resolucion es de al menos 150 puntos por centímetro*/
@media print and (min-resolution: 150dpcm) { ... }

/*Se aplican los estilos si la resolucion es de al menos 2 puntos por pixel*/
@media print and (min-resolution: 2dppx) { ... }
/*Es equivalente a...*/
@media (-webkit-max-device-pixel-ratio: 2) { ... }

Las dos primeras sirven para saber cuantos puntos se dibujan en una pulgada o un centímetro, la tercera ya no se refiere a unidades de medida sino a pixels, puede resultar confuso pues lo logico es que un pixel sea un punto, sin embargo los pixels en algunos dispositivos de mac que tienen una alta resolucion se tratan de forma distinta.

Por ejemplo un ipad air tiene un pixel ratio de 2, por lo que si le preguntas al navegador cual es su ancho puede estar diciendo que es 1024px y realmente estar dibujando 2048 puntos que serian los pixeles reales de la pantalla, por eso para este tipo de dispositivos las imagenes se suben con resoluciones mayores y esta media querie nos puede resultar de utilidad.

Como nota pongo que se puede escribir de dos maneras, ambas hacen lo mismo pero la primera es la estandar y la segunda es una implementacion que hacen los navegadores que usan webkit como por ejemplo chrome…
Tambien podemos hacer uso aqui de los prefijos.

 

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)