Una página adaptable cambia con la pantalla
Un diseño adaptable (en inglés, responsive) es el que cambia según el ancho de la pantalla. Así una misma página se lee bien en un móvil, en una tableta y en un portátil.
Piensa en la web de horarios del metro de tu ciudad. Si en el móvil tienes que ampliar para leer cada línea, esa página no está adaptada.
Al terminar esta lección
Nota
Puedo hacer que una página se ajuste al ancho de cualquier pantalla.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Viewport | la zona de la pantalla en la que se dibuja la página | |
| Diseño adaptable | un diseño que cambia según el ancho de la pantalla | |
| Media query | una regla de CSS que solo vale si se cumple una condición | @media (min-width: 600px) |
| Punto de corte | el ancho en el que cambian las reglas | |
| Móvil primero | escribir primero las reglas del móvil y añadir las de pantallas grandes | |
| Píxel CSS | la unidad de medida de la página, no de la pantalla física | 600px |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Sin viewport, el móvil encoge la página
Por defecto, un móvil dibuja una página como si su pantalla fuera muy ancha, y después la reduce. Por eso el texto sale diminuto.
La etiqueta viewport corrige esto. Va en el head de la página y dice al móvil que use el ancho real de su pantalla.
La etiqueta viewport, dentro del head
<meta name="viewport" content="width=device-width, initial-scale=1">El laboratorio tiene una app de hábitos
El laboratorio tiene una app pequeña para anotar hábitos, en la carpeta app. Se abre con el enlace de vista previa, al lado de JupyterLab.
Los dos scripts siguientes leen la app y no la cambian. Imprimen sus palabras en inglés, porque son del laboratorio. Lee la salida con calma: found es "encontrada" y MISSING es "falta".
Buscar la etiqueta viewport
docker exec jupyter python3 steps/viewport.pySe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Una media query activa reglas desde un ancho
Una media query es una regla de CSS que solo vale si se cumple una condición. La más usada pregunta por el ancho mínimo de la pantalla.
Con móvil primero, las reglas sin condición son las del móvil. Cada media query añade reglas cuando la pantalla es más ancha. El ancho donde cambian es un punto de corte.
Dos puntos de corte, 600 y 900 píxeles
ul { display: grid; grid-template-columns: 1fr; }
@media (min-width: 600px) {
main { padding: 24px; }
}
@media (min-width: 900px) {
ul { grid-template-columns: 1fr 1fr; }
}Ejemplo resuelto: qué reglas valen en cada ancho
| Ancho | Reglas base | Desde 600 | Desde 900 | Resultado |
|---|---|---|---|---|
| 360 px, un móvil | Sí | No | No | Una columna, sin margen extra |
| 700 px, una tableta pequeña | Sí | Sí | No | Una columna, con margen |
| 1200 px, un portátil | Sí | Sí | Sí | Dos columnas, con margen |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Listar las media queries de la app
docker exec jupyter python3 steps/breakpoints.pySe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Un error frecuente
Advertencia
Mucha gente cree que, si la página se ve bien en una ventana estrecha del ordenador, ya funciona en el móvil. La ventana estrecha solo prueba el diseño. No prueba el tamaño del dedo ni una red lenta. Úsala para el diseño y prueba también en un móvil real.