Media queries para adaptarnos a los distintos dispositivos

1. INTRODUCCIÓN
Toda web de nueva factura tiene que estar maquetada siguiendo los principios del responsive
design. Un diseño adaptable se basa en cambiar la apariencia de la web (tanto el contenido como
su distribución) en función del dispositivo desde el cual se accede. No se debe confundir con tener
una versión de la página para cada dispositivo, sino que con la misma maquetación HTML y con el
mismo código CSS asociado, el diseño varía en función del dispositivo.
En este punto vamos a ver cómo usar la propiedad media queries para poder personalizar los
estilos CSS basándonos en las características del dispositivo como, por ejemplo: tv, pc, tablet,
móvil o si está horizontal (paisaje) o en vertical (retrato), etc; con ello y conociendo los tamaños
más comunes de dispositivos de salida: 320px, 480px, 600px, 768px, 900px, 1200px
podemos crear selectores CSS de este tipo:

/* Para 960px */
@media only screen and (max-width: 980px) and (min-width: 821px) { … }
/* Para 800px */
@media only screen and (max-width: 820px) and (min-width: 621px) { … }
/* Para 600px */
@media only screen and (max-width: 620px) and (min-width: 501px) { … }
/* Para 480px */
@media only screen and (max-width: 500px) and (min-width: 341px) { … }
/* Para 320px */
@media only screen and (max-width: 340px) and (min-width: 5px) { … }

2. ¿Qué es un media type?

Permiten indicar una serie de estilos que se aplicarán según el tipo del medio, en algunas
páginas, al ver el código fuente, nos encontramos algo como lo siguiente en su head:
En ese ejemplo, se incluye una hoja de estilos llamada style.css siempre (media=”all”), pero
existe una hoja de estilos llamada print.css que sólo se ejecutará cuando se esté imprimiendo
el documento (media=”print”).
Los media types más típicos son:
• all: para todo (valor por defecto).
• print: en la vista previa de impresión y a la hora de imprimir.
• screen: para las pantallas de ordenador.
• tv: para televisores.
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

2. Media Queries. Consulta de Medios.

 Media queries para adaptarnos a los distintos dispositivos

Las media queries son propias de CSS3 y vienen a extender a los media, utilizando un
media type con una serie de expresiones relacionadas con las características del
dispositivo desde el cual se accede a la web. Las media queries dan como resultado
verdadero o falso. Si el resultado es verdadero, se leen las reglas CSS de su interior, si es
falso no.
@media (max-width: 600px) { . . .}
Significado: Cuando el ancho de la pantalla tenga un ancho menor a 600px lees el
código encerrado dentro de las llaves que abren y cierran la media querie.
En CSS podemos hacer que el fondo de la web sea verde, pero cuando la pantalla
sea menor a 600px el fondo será rojo.
body {
background: green;
}
@media (max-width: 600px) {
body {
background: red;
}
}
Incluimos en head, la hoja de estilos a un documento HTML
<link rel="stylesheet" type="text/css" media="all" href=“style.css">

Principales expresiones a utilizar en las media queries

Al igual que hay varios media types, las media queries tienen varias expresiones a utilizar,
las más interesantes para el responsive design son:
• orientation: permite tomar por valores landscape o portrait lo que significa que la
orientación sea horizontal o vertical, o sea, landscape si la ventana es más ancha
que alta y portrait si es más alta que ancha.
• resolution: Permite las variantes min-resolution y max-resolution. El valor que toma es
la densidad de la pantalla en valor de puntos por pulgada (dpi) o en puntos por pixel
(dppx). Su uso principal es para cambiar los background de imágenes según el
dispositivo sea de alta resolución (como los retina display, iphone, …) o normal para
que no se carguen más datos de los necesarios.
• width: El alto del dispositivo. Se permiten las variantes min-width y max-width. Es la
principal expresión para el responsive design.

Aunque hay varios elementos diferentes por los que podemos consultar, los que se usan
con mayor frecuencia para el diseño web adaptable son min-width, max-width, min-
height y max-height.

Parámetros

min-width Las reglas se aplican para cualquier ancho del navegador

que supere el valor definido en la consulta.

max-width Las reglas se aplican para cualquier ancho del navegador

que sea inferior al valor definido en la consulta.
 Media queries para adaptarnos a los distintos dispositivos

min-height Las reglas se aplican para cualquier altura del navegador

que supere el valor definido en la consulta.

max-height Las reglas se aplican para cualquier altura del navegador

que sea inferior al valor definido en la consulta.

orientation=portrait Reglas que se aplican a cualquier navegador de altura

inferior o igual al ancho.

orientation=landscape Reglas que se aplican a cualquier navegador de ancho

inferior a la altura.

width. Especificamos el ancho de la zona de visualización dirigido del dispositivo de salida.

El valor es de longitud (length) y se aplica a tipos de medios visuales y táctiles. Acepta los prefijos
min / max.
Ejemplo (anchuras entre 400 y 700 píxeles)
@media screen and (min-width: 400px) and (max-width: 700px{  
body{  
background-color:#555;  
font-family: Times New Roman;  
}  
header h3{  
        text-align:center;  
    }  
}

height. Especificamos el alto de la zona de visualización dirigido del dispositivo de salida.

@media screen and (min-width: 400px) and (max-width: 700px{  
body{  
background-color:#555;  
font-family: Times New Roman;  
}  
header h3{  
        text-align:center;  
    } 
}

Orientatión
Valores: portrait | landscape No acepta los prefijos min / max.
El valor de “orientation” es ‘portrait’ (retrato) cuando el valor de la altura del medio de
salida es mayor o igual al valor de la anchura de ese medio. De lo contrario el valor es
‘landscape’ (paisaje).
 Media queries para adaptarnos a los distintos dispositivos

@media all and (orientation:portrait) { /*Reglas CSS*/ }

@media all and (orientation:landscape) { /*Reglas CSS*/ }

Las media queries como base para el responsive design

Gracias a las media queries podemos cambiar totalmente la vista y distribución de los
elementos de la maqueta en función del ancho del dispositivo, pudiendo mostrar u
ocultar etiquetas.
Lo que normalmente se hace, es establecer tres o cuatro tamaños límite de pantalla y
personalizar las reglas vía media queries. Vamos a hacer un pequeño ejemplo.

Nota Al realizar nuestro desarrollo responsive nos encontramos con que podemos
definir nuestro responsive de dos maneras, utilizando max-width, max-height, min-width
y min-height o añadiendo la palabra device... max-device-width, max-device-height,
min-device-width y min-device-height
La diferencia entre ellos, es que los que tienen la palabra device hacen referencia al
tamaño del dispositivo, ya sea smartphone, tablet o monitor de pc. El resto (max-width,
max-height, min-width y min-height) hace referencia al tamaño de la ventana del
navegador.
Para nuestro ejemplo usado en los modernos frameworks CSS responsive design, se
basa en preparar primero la vista óptima para el móvil y utilizar las media queries para
ir adaptando la maqueta a dispositivos mayores.
Para hacer que el texto se muestre de la siguiente manera:
• Vista móvil: 1 columna.
• Vista tablet: 2 columnas.
• Vista PC: 3 columnas.
El código HTML será siempre el mismo:

<!DOCTYPE html>
<html>
<head>
<title>Texto a tres columnas con HTML5 y CSS3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="./style_responsive.css" type="text/css"
media="all">
</head>
<body>
<section>
<p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo …</p>
<p>Es, pues, de saber que este sobredicho hidalgo, los ratos que
estaba ocioso …</p>
</section>
</body>
</html>

 Media queries para adaptarnos a los distintos dispositivos

Media queries para vista móvil

Como estamos siguiendo el principio de mobile first, nuestro CSS base, será el óptimo
para móvil, así que nuestro style_responsive.css será así:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
line-height: 1;
}
p{
font-size: 1.5rem;
line-height: 1.333333334;
margin-bottom: 20px;
margin-bottom: 2rem;
text-align: justify;
}

section {
margin: 20px;
margin: 2rem;
}

Media queries para vista tablet

Para determinar que se está en “vista tablet”, usamos las media queries para activar la
“vista tablet” cuando el ancho de la pantalla sea superior a 600px.
@media (min-width: 600px) {
section {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-gap: 4rem; /* Chrome, Safari, Opera */
-moz-column-gap: 4rem; /* Firefox */
column-gap: 4rem;
-webkit-column-rule: 5px solid rgb(75, 180, 149) ; /* Chrome, Safari, Opera */
-moz-column-rule: 5px solid rgb(75, 180, 149); /* Firefox */
column-rule: 5px solid rgb(75, 180, 149) ;
-webkit-column-rule: 0.5rem solid rgb(75, 180, 149) ; /* Chrome, Safari, Opera */
-moz-column-rule: 0.5rem solid rgb(75, 180, 149); /* Firefox */
column-rule: 0.5rem solid rgb(75, 180, 149) ;
}
}
Con este código, la vista de móvil se mantiene, pero la vista tablet cambia colocando el
texto a dos columnas, algo que ocurre también en la vista PC.
¿Por qué funciona?
Las reglas CSS que están fuera de las media queries siempre se leen, de forma que,
por ejemplo, la etiqueta .three-columns siempre tiene el margin indicado en el CSS.
 Media queries para adaptarnos a los distintos dispositivos

Cuando la pantalla tiene un ancho de 600px o más, además de las reglas ya

leídas en la vista de móvil, se ejecuta la regla que está dentro de la media query.
De esta manera, además de todo el CSS usado en la “vista móvil”, se leen y
ejecutan las reglas que ponen el texto a 2 columnas.

Para terminar, sólo tenemos que utilizar las media queries para establecer que el texto se
mostrará a tres columnas cuando el dispositivo tenga un ancho superior a 900px. Para
ello, añadiremos al CSS el siguiente código:

@media (min-width: 900px) {

section{
column-count: 3;
}
}