Artículo Introducción de wulin.com (www.vevb.com): diseño web receptivo.
Con la popularidad de 3G, cada vez más personas usan sus teléfonos móviles para navegar por Internet.
Los dispositivos móviles están superando los dispositivos de escritorio y se convierten en la terminal más común para acceder a Internet. Entonces, los diseñadores web tienen que enfrentar un problema difícil: ¿cómo pueden presentar la misma página web en dispositivos de diferentes tamaños?
La pantalla de un teléfono móvil es relativamente pequeña, generalmente por debajo de 600 píxeles; El ancho de pantalla de una PC generalmente está por encima de 1,000 píxeles (actualmente el ancho de la corriente principal es de 1,366 × 768), y algunos incluso alcanzan 2,000 píxeles. No es fácil tener resultados satisfactorios en pantallas de diferentes tamaños.
La solución a muchos sitios web es proporcionar diferentes páginas web para diferentes dispositivos, como proporcionar una versión móvil o una versión para iPhone/iPad. Esto garantiza el efecto, pero es bastante problemático. Requiere el mantenimiento de varias versiones. Además, si un sitio web tiene múltiples portales, aumentará en gran medida la complejidad del diseño de la arquitectura.
Por lo tanto, algunas personas han imaginado durante mucho tiempo si se puede diseñar a la vez y generalmente aplicable a la misma página web se adapta automáticamente a pantallas de diferentes tamaños, y ajusta automáticamente el diseño de acuerdo con el ancho de la pantalla.
1. El concepto de diseño web adaptativo
En 2010, Ethan Marcotte propuso el término diseño web receptivo, que se refiere a un diseño web que puede reconocer automáticamente el ancho de la pantalla y hacer los ajustes correspondientes.
Hizo un ejemplo de los retratos de los seis protagonistas de las aventuras de Sherlock Holmes. Si el ancho de la pantalla es mayor de 1300 píxeles, 6 imágenes están en una fila una al lado de la otra.
Si el ancho de la pantalla está entre 600 píxeles y 1300 píxeles, las 6 imágenes se dividen en dos líneas.
Si el ancho de la pantalla está entre 400 píxeles y 600 píxeles, la barra de navegación se mueve hacia el cabezal de la página.
Si el ancho de la pantalla está por debajo de 400 píxeles, 6 imágenes se dividen en tres líneas.
Mediaqueri.es tienen más ejemplos como este anteriormente.
También hay un widget de prueba aquí, que puede mostrar los efectos de prueba de las pantallas con diferentes resoluciones en una página web al mismo tiempo. Recomiendo instalarlo.