Introducción al diseño para diferentes pantallas en CSS

En el mundo moderno, un sitio web debe mostrase correctamente en dispositivos con diferentes tamaños de pantalla.

Por lo general, los dispositivos se dividen en cuatro clases: computadoras (desktop), portátiles, tabletas (tablet) y teléfonos (mobile).

Antes, en tiempos pasados, se conocían los tamaños de pantalla populares de todos los dispositivos, afortunadamente no había tantos. Y los sitios se hacían para que se mostraran correctamente en una lista conocida de resoluciones.

Actualmente, hay tantos dispositivos que es imposible compilar una lista de resoluciones para las cuales debe diseñarse un sitio. Ahora se considera que el diseño debe mostrarse correctamente en una pantalla de cualquier tamaño.

Esto se logra reorganizando los bloques en puntos clave del diseño. Además, estos puntos clave no se eligen para dispositivos específicos, sino para el contenido del sitio, de modo que se vea bien.

Entre los puntos clave, el ancho de los elementos del sitio debe ser flexible, para que se adapte al ancho de la pantalla. Y en los puntos clave ocurre la reorganización de los bloques en otras posiciones.

El diseño descrito se llama adaptativo o responsive (responsive). Su estudio es lo que abordaremos en las siguientes lecciones.