¿Cuáles son las diferencias entre los cuatro diseños de página web: estático, adaptable, fluido y responsivo?

1. Flexibilidad diferente:

Diseño estático: no hay flexibilidad alguna y se ha eliminado gradualmente.

Diseño adaptable: una versión mejorada del diseño estático. Debido a su poderosa flexibilidad, gradualmente se ha convertido en sinónimo de páginas web de alta gama.

Diseño fluido: más flexible y se puede aplicar a otros tres diseños de sitios web.

Diseño responsivo: una versión mejorada del diseño adaptativo debe ser universalmente adaptable a varias pantallas en el mercado. La dificultad de desarrollo y la carga de trabajo son muy grandes y el precio de desarrollo es naturalmente más alto que el normal. sitios web.

2. Diferentes métodos de diseño:

Diseño estático: diseño centrado, todos los estilos usan ancho/alto absoluto (px), diseña un diseño y úsalo cuando el ancho y alto de la pantalla. Se ajustan las barras de desplazamiento horizontal y vertical para ver las partes oscurecidas. ?

Diseño adaptable: utilice consultas de medios @media para cambiar diferentes estilos para dispositivos de diferentes tamaños y medios.

Diseño de flujo: use porcentajes para definir el ancho y la altura se fija principalmente en px. Se puede ajustar de acuerdo con el tamaño en tiempo real del área visual (ventana gráfica) y el elemento principal a adaptar. a diversas resoluciones en la medida de lo posible.

Diseño responsivo: diseño fluido de consultas de medios. El uso de consultas de medios @media y el sistema de cuadrícula junto con unidades de diseño relativas para el diseño es un nombre colectivo para la tecnología que combina capacidad de respuesta, flujo y otras tecnologías mencionadas anteriormente para devolver diferentes estilos a una sola página web para diferentes dispositivos a través de CSS.

Información ampliada:

Resumen de las características de los cuatro diseños de página web: estático, adaptativo, fluido y responsivo.

1. diseño web, el tamaño de todos los elementos de la página web debe estar en px como unidad. Independientemente del tamaño exacto del navegador, el diseño de la página siempre se muestra tal como estaba cuando se escribió originalmente el código.

2. Diseño fluido: el ancho de los elementos de la página se ajusta según la resolución de la pantalla, pero el diseño general permanece sin cambios. Esto significa que si la pantalla es demasiado grande o demasiado pequeña, los elementos no se mostrarán correctamente.

3. Diseño adaptable: defina diseños para diferentes resoluciones de pantalla, es decir, cree múltiples diseños estáticos, cada uno de los cuales corresponde a un rango de resolución de pantalla.

4. Diseño responsivo: Defina diseños para diferentes resoluciones de pantalla. Al mismo tiempo, en cada diseño se aplica el concepto de diseño fluido, es decir, el ancho de los elementos de la página se adapta automáticamente a la ventana. ajustado.