Diseño responsivo
Construyes una página en tu laptop, se ve bien, y luego alguien la abre en un teléfono. Las columnas que cuidadosamente alineaste ahora están aplastadas en una franja angosta, el texto se sale del borde, y aparece una barra de desplazamiento horizontal donde no debería haber ninguna. Nadie escribió una versión separada de la página para teléfono. Hay una sola página, y tiene que verse bien tanto en un teléfono de 380 píxeles como en un monitor de 1400 píxeles sin que tengas que enviar dos versiones de todo. Esa capacidad de adaptación es el diseño responsivo, y la mayoría está construida con herramientas que ya tienes.
Qué significa responsivo y la ventana gráfica
Una página responsiva es una sola página que se remodela a sí misma para ajustarse a cualquier pantalla en la que caiga. El mismo HTML y el mismo CSS sirven un teléfono, una tableta y un escritorio, y el diseño se ajusta para que nada se desborde y nada se sienta apretado. No estás construyendo tres sitios. Estás construyendo uno que se flexiona.
Antes de que todo eso funcione, el navegador necesita una instrucción en el HTML. Los teléfonos solían pretender que eran del ancho del escritorio y encogían la página completa para ajustarse, por eso los sitios antiguos aparecían como un desorden diminuto y alejado. Esta línea, que vive en la etiqueta <head> de tu HTML, le dice al teléfono que use su ancho real en su lugar:
<meta name="viewport" content="width=device-width, initial-scale=1" />Sin ella, tu CSS está diseñando una pantalla ancha imaginaria y tu cuidadoso diseño nunca tiene la oportunidad de funcionar.
Diseños fluidos primero
El reflejo es llegar a las reglas especiales de teléfono de inmediato, pero gran parte de la capacidad de respuesta viene gratis antes de que escribas una sola. Si construyes con valores fluidos, los que se estiran y encogen con el espacio, el diseño ya se adapta.
Dos hábitos llevan la mayor parte. Establece anchos como porcentajes para que una caja tome una parte de su contenedor en lugar de un número fijo de píxeles, y usa max-width para que algo pueda encogerse en una pantalla pequeña pero nunca crezca más allá de un tamaño de lectura cómodo en una grande:
.container {
width: 90%; /* toma el 90% del espacio que tiene */
max-width: 60rem; /* pero nunca más ancho que 60rem en pantallas grandes */
margin: 0 auto; /* centrado */
}En un teléfono este contenedor es el 90% de una pantalla angosta. En un monitor deja de crecer a 60rem y se sienta centrado. No escribiste una regla de teléfono; los valores hicieron la adaptación.
max-width para que se encojan en teléfonos sin estirarse demasiado en monitores. Esos dos valores adaptan el diseño por sí solos. Construye fluido primero, y necesitarás muchas menos de las reglas específicas para teléfono que vienen después. Media queries
A veces los valores fluidos no son suficientes y necesitas que el diseño realmente cambie a cierto tamaño, por ejemplo un menú que se apila verticalmente en un teléfono pero se sienta en una fila en un escritorio. Eso es para lo que sirve una media query: un bloque de CSS que solo se aplica cuando la pantalla cumple una condición que estableces.
Comienza con los estilos de pantalla pequeña como tu CSS normal, luego agrega una consulta que superponga los cambios de pantalla más ancha:
.nav {
display: flex;
flex-direction: column; /* apilado en pantallas pequeñas */
}
@media (min-width: 40rem) {
.nav {
flex-direction: row; /* uno al lado del otro una vez que hay espacio */
}
}La regla dentro de @media (min-width: 40rem) solo se activa una vez que la pantalla tiene al menos 40rem de ancho. Por debajo de eso, se aplica la regla plana .nav y el menú se apila.
@media (min-width: ...) para agregar los cambios para pantallas más grandes. De esa manera la vista de teléfono es tu punto de partida, no un parche unido después. Elegir puntos de quiebre
Un punto de quiebre es el ancho donde una media query se activa y el diseño cambia. La forma tentadora de elegir uno es buscar el ancho de un teléfono o tableta popular y hacerlo coincidir. Esa es la trampa. Hay cientos de tamaños de dispositivos, cambian cada año, y perseguirlos es un juego que no puedes ganar.
La pregunta mejor es: ¿a qué ancho este diseño empieza a verse mal? Amplía tu navegador lentamente y observa. Cuando una línea de texto se pone demasiado larga para leerla cómodamente, o dos columnas se ponen demasiado estrechas, ese es donde un punto de quiebre pertenece, cualquiera que sea el número que resulte ser.
/* Punto de quiebre elegido porque el texto se puso demasiado ancho aquí, */
/* no porque un teléfono resulte ser de este tamaño */
@media (min-width: 45rem) {
.article { max-width: 38rem; }
}