01
¿Qué significa responsive?
Una web responsive es una página capaz de adaptar su diseño al tamaño de la pantalla donde se está visualizando.
El mismo contenido puede mostrarse de forma diferente en ordenador, tablet y móvil.
02
La etiqueta viewport.
En tus documentos HTML ya hemos utilizado esta línea:
Esta etiqueta indica al navegador que el ancho de la página debe adaptarse al ancho real del dispositivo.
width=device-width utiliza el ancho del dispositivo.
initial-scale=1.0 establece el nivel inicial de zoom.
03
Evita anchuras rígidas.
Imagina que escribes:
width: 1200px;
}
En una pantalla de móvil esa sección podría ser mucho más ancha que la pantalla.
Una opción más flexible sería:
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
La sección podrá reducirse cuando la pantalla sea pequeña, pero no superará los 1200 píxeles en pantallas grandes.
04
Las imágenes también deben ser flexibles.
Una imagen muy grande puede desbordarse fuera de la pantalla.
Una regla muy útil es:
max-width: 100%;
height: auto;
}
Así la imagen nunca será más ancha que su contenedor y mantendrá sus proporciones.
05
Qué son las media queries.
Las media queries permiten aplicar reglas CSS solamente cuando se cumplen determinadas condiciones.
Por ejemplo:
h1 {
font-size: 40px;
}
}
Esto significa:
06
Adapta tu título principal.
En la lección anterior utilizamos un título grande:
font-size: 64px;
}
Ese tamaño puede resultar excesivo en móvil.
Podemos añadir:
h1 {
font-size: 42px;
}
}
07
Reduce los espacios en móvil.
En ordenador podemos utilizar bastante espacio entre secciones, pero en una pantalla pequeña puede ser demasiado.
Si teníamos:
padding: 90px 30px;
}
podemos adaptar:
section {
padding: 60px 20px;
}
}
08
Convierte columnas en una sola columna.
Imagina una sección de servicios con tres columnas:
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
En móvil podemos cambiarla a una sola:
.services-grid {
grid-template-columns: 1fr;
}
}
Las tarjetas aparecerán una debajo de otra.
09
Adapta una navegación sencilla.
Si tu navegación horizontal deja de caber, puedes reorganizarla temporalmente en columna.
nav {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
}
Más adelante podrías crear un menú hamburguesa con JavaScript, como el que utilizamos en Digital Ukhti.
10
Utiliza tamaños fluidos cuando tenga sentido.
CSS dispone de una función muy útil llamada clamp().
Por ejemplo:
font-size: clamp(40px, 6vw, 72px);
}
Esto permite que el texto cambie progresivamente de tamaño.
40px es el tamaño mínimo.
6vw es el tamaño flexible.
72px es el tamaño máximo.
11
Prueba tu web en diferentes tamaños.
No necesitas tener muchos dispositivos físicos.
Los navegadores incluyen herramientas de desarrollo que permiten simular diferentes tamaños de pantalla.
Abre tu página en Chrome o Edge.
Haz clic derecho y selecciona Inspeccionar.
Activa la vista de dispositivos.
Prueba varios anchos de pantalla.
No te limites a comprobar un único modelo de teléfono. Arrastra el ancho de la ventana y observa cómo responde el diseño.
12
Qué debes comprobar en móvil.
Que ningún contenido salga de la pantalla.
Que el texto sea suficientemente grande.
Que los botones sean fáciles de pulsar.
Que las imágenes no se deformen.
Que las columnas se reorganicen correctamente.
Que la navegación siga siendo usable.
RESUMEN
Lo que has aprendido.
- Una web responsive se adapta al tamaño de la pantalla.
- La etiqueta viewport es esencial en dispositivos móviles.
- Conviene evitar anchuras rígidas innecesarias.
- Las imágenes pueden utilizar max-width: 100%.
- Las media queries permiten aplicar estilos según el ancho.
- Los títulos deben adaptarse a pantallas pequeñas.
- Los espacios también pueden reducirse.
- Las cuadrículas pueden pasar de varias columnas a una.
- La navegación debe seguir siendo usable.
- clamp() permite crear tamaños fluidos.
- Debes probar la web en varios tamaños.
PONLO EN PRÁCTICA
Convierte tu web en responsive.
Abre el proyecto que has construido durante las últimas lecciones y adapta su CSS.
- Comprueba que tienes la etiqueta viewport.
- Añade max-width: 100% a las imágenes.
- Crea una media query para 768px.
- Reduce el tamaño del h1 en móvil.
- Reduce el padding de las secciones.
- Convierte las columnas en una sola columna.
- Adapta la navegación.
- Comprueba los botones.
- Prueba la página en varios anchos.