Tu página en el móvil del vecino
Casi todo el mundo mira las webs en el móvil. La pantalla es pequeña y estrecha.
Una página con tres columnas se ve bien en el ordenador. En el móvil, las letras se aplastan.
Hoy haces que la misma página cambie de forma según el ancho de la pantalla.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Adaptable | Una página que cambia de forma según la pantalla. | |
| Porcentaje | Una parte de cada cien. El 50 % es la mitad. | width: 50%; |
| Media query | Una regla que solo vale si la pantalla cumple una condición. | @media (max-width: 600px) |
| Punto de corte | El ancho de pantalla donde cambia el diseño. | 600px |
| Viewport | La zona de la pantalla donde se ve la página. |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Anchos que se estiran
Si escribes width: 300px;, la caja mide siempre 300 píxeles. En un móvil estrecho se sale de la pantalla.
Si escribes width: 50%;, la caja mide la mitad de su contenedor. Se adapta sola.
Pruébalo: dos columnas del 50 %
<div class="row">
<div class="col">Columna izquierda</div>
<div class="col">Columna derecha</div>
</div>
Ejemplo resuelto: porcentajes de un ancho
| Ancho | En un móvil de 400 px | En un ordenador de 1200 px |
|---|---|---|
| 25 % | 100 px | 300 px |
| 50 % | 200 px | 600 px |
| 75 % | 300 px | 900 px |
| 100 % | 400 px | 1200 px |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Una regla que depende de la pantalla
Una media query empieza por @media. Dentro de los paréntesis va la condición.
Con (max-width: 600px), las reglas de dentro solo valen si la pantalla mide 600 px o menos.
Así, en pantallas estrechas puedes poner las columnas una debajo de otra.
Pruébalo: de fila a columna
<div class="row">
<div class="col">Primera</div>
<div class="col">Segunda</div>
</div>
<!-- En el CSS, cambia 600px por 2000px y por 100px. -->
Repaso rápido: la media query
Inténtalo
Repaso rápido: la media query
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Primero el móvil
Muchos diseñadores escriben primero el estilo del móvil, que es el más sencillo: una columna.
Después añaden una media query con min-width para las pantallas grandes.
Con min-width: 600px las reglas valen cuando la pantalla mide 600 px o más.