Escrito por Laura Chuburu
El responsive design es una técnica de diseño web que utiliza las reglas media queries para lograr un diseño adaptable a cualquier dispositivo.
Las reglas media queries son reglas CSS especiales que se aplican según la resolución de pantalla. Estas reglas se escriben en la misma hoja de estilos del sitio y empiezan con una línea de código especial donde determina en qué resolución de pantalla deben aplicarse, por ejemplo:
@media screen and (min-width: 576px) {
acá van las reglas CSS escritas normalmente una debajo de la otra
}
La primer línea se podría traducir como una frase condicional de la siguiente manera: "Si el medio es una pantalla y tiene un ancho mínimo de 576px, entonces aplicar las siguientes reglas". Y esas reglas se escribien entre las llaves.
El ejemplo completo quedaría:
@media screen and (min-width: 576px) {
body {background-image:url(foto-fondo.jpg)}
}
En el código anterior le estamos indicando al navegador que si el dispositivo mide más de 576px agregue una imagen de fondo al body.
Se pueden escribir varias reglas dentro de una misma regla media querie, quedaría asi:
@media screen and (max-width: 1100px) {
body {background-image:url(foto-fondo.jpg)}
header {tex-align:center}
}
Un sitio web habitualmente tiene varias reglas media queries para realizar cambios en diferentes resoluciones. Por ejemplo:
@media screen and (min-width: 576px) {
body {background-image:url(foto-fondo.jpg)}
header {tex-align:center}
}
@media screen and (min-width: 768px) {
h1 {font-size:45px}
.redes {position: fixed}
}
En el código anterior, la primer regla media querie se aplica cuando el navegador tiene una resolución mayor a 576px y la segunda, mayor a 768px.
Como la cantidad de dispositivos y resoluciones de pantallas es casi infinita, no podemos (ni es necesario) hacer una regla por cada dispositivo. Las reglas media queries se pueden ir creando a medida que necesitemos ajustar el diseño y esa medida es totalmente independiente de cualquier dispositivo. Lo ideal es que si chequeamos un sitio responsive en una pc y modificamos gradualmente el ancho del navegador, los elementos se vayan acomodando de manera fluida sin que queden puntos sin resolver aunque no exista un dispositivo con esa resolución.
Desde hace unos años y en parte por el uso generalizado de Bootstrap se utilizan 4 medidas estandar para realizar los cambios (llamados breakpoint): 576px, 768px, 992px y 1200px.
Cuando empezamos a aplicar esta técnica hace algunos años, primero maquetábamos el sitio para la versión de escritorio y luego creábamos las reglas media queries para empezar a adaptarlo a dispositivos menores. En ese caso, utilizábamos max-width ya que aplicábamos las reglas a resoluciones menores a la que ya estaba definida.
Actualmente le damos prioridad al diseño para dispositivos móviles, una tendencia que se denomina Mobile First. Esto hace que empecemos pensando el diseño del sitio para dispositivos móbiles y luego lo adaptemos a las resoluciones mayores. Por esta razón ahora las reglas media queries las utilizamos con min-width que aplica las reglas CSS a resoluciones mayores.
Cuando diseñamos un sitio responsive, tenemos que colocar en el head de todos los archivos html la siguiente línea:
<meta name="viewport" content="width=device-width,initial-scale=1">
Como por defecto los smartphones reducen la vista de un sitio web para que encaje en la pantalla, esta etiqueta le indica al navegador que no lo haga.
Para usar más eficientemente las reglas media queries, nos conviene partir de la base de un sitio con diseño elástico, donde especialmente las medidas de los anchos estén resueltas en porcentajes. De esta manera, con media queries simplemente hacemos ajustes. Cuanto más elástico sea nuestro diseño, menos reglas media queries vamos a necesitar.
