Lección 25: Responsive Design
Continuando con todas la prácticas que hemos seguido hasta el momento, no debería existir problemas para adaptar un diseño de smartphone a escritorio o viceversa. No obstante existen algunas estrategias que te ayudarán en el cometido que todo Diseñador Web que se precie debería dominar.
Restablecer zoom
Por defecto, un navegador aplicará un zoom en versiones de móvil para ajustar el tamaño de los textos; lo cual estropeará un diseño adaptable. La solución es indicar con el meta viewport
que el usuario no pueda reescalar, gesto de pellizco, ni el navegador ajuste el zoom.
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
Container
Conseguir un contenedor adaptativo.
- Centrado.
- Anchura máxima a 1000px.
- Relleno en versión móvil.
.container {
margin: 0 auto;
max-width: 1000px;
padding: 1rem;
}
Imágenes
Es recomendable que todas nuestras imágenes dispongan una anchura de 100% para que sean adaptables al diseño.
img {
width: 100%;
}
Media queries.
Dependiendo de la resolución podemos activar o desactivar estilos.
El prefijo “min-“ o “max-“ expresan restricciones de “condición mínima” o “condición máxima”.
En el siguiente caso se aplicará el color de fondo si la anchura del navegador es inferior a 600px.
@media screen and (max-width: 600px) {
article {
background-color: orange;
}
}
Split media
Una estrategia muy cómoda es dividir el CSS en 3 ficheros: comunes entre resoluciones (main.css
), solo para smartphones (mobile.css
) y solo para escritorio (desktop.css
).
<link href="css/main.css" rel="stylesheet">
<link href="css/mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
<link href="css/desktop.css" rel="stylesheet" media="all and (min-width: 601px)">
Puedes ampliar la técnica en el siguiente artículo.
Dispones de una versión del patrón 7-1 con SASS usando Split media con 2 ficheros.
Menú móvil o de hamburguesa.
A continuación puedes seguir las técnicas para conseguir diferentes tipos de menús.
- Menú completo Responsive Design para Escritorio y Móvil/Celular.
- Menú básico para Escritorio.
- Menú en CSS Escritorio y Móvil/Celular.
- Menú desplegable con subcategorias.
sticky
Nos permite que un elemento se fije al scroll hasta que su contenedor padre se quede sin espacio.
Puedes ver un ejemplo.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me ayudas?
No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

- 1 café: Se mantiene el dominio durante 4 meses.
- 2 cafés: Se liquida 1 mes del Servidor Web.
- 3 cafés: Se paga 1 mes de Newsletter.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios