¿Cómo se ajustan las páginas HTML al ancho de la pantalla de una computadora?

El núcleo del "diseño web adaptativo" es el módulo MediaQuery introducido por CSS3. Esto significa que detecta automáticamente el ancho de la pantalla y carga el archivo CSS apropiado.

lt; link rel="stylesheet" type="text/css "media="pantalla y (max-device-width: 400px) "href="tinyScreen.css" /gt;

El código anterior indica. Si el ancho de la pantalla es inferior a 400 píxeles (ancho máximo del dispositivo: 400 px), se carga el archivo tinyScreen.css.

lt; link rel="stylesheet" type="text/css" media="pantalla y (ancho mínimo: 400 px) y (ancho máximo del dispositivo: 600 px) "href="smallScreen. css"/gt;

Si el ancho de la pantalla está entre 400 y 600 píxeles, se carga el archivo smallScreen.css.

Información ampliada:

El diseño web adaptativo se refiere a nuevos métodos y tecnologías de diseño web que pueden adaptar páginas web para que se muestren en dispositivos terminales de diferentes tamaños.

En 2010, Ethan Marcotte acuñó el término "diseño web responsivo" para referirse al diseño web que reconoce automáticamente el ancho de la pantalla y se ajusta en consecuencia. Lo ilustra con el ejemplo de las cabezas de los seis personajes principales.

Si el ancho de la pantalla supera los 1300 píxeles, se muestran seis imágenes una al lado de la otra. Si el ancho de la pantalla está entre 600 y 1300 píxeles, las seis imágenes se dividen en dos filas. Si el ancho de la pantalla está entre 400 y 600 píxeles, la barra de navegación se mueve al encabezado. Si el ancho de la pantalla es inferior a 400 píxeles, divida las seis imágenes en tres filas.