1. Diseño estático
Establezca un ancho y alto fijos para los elementos de la página en px. Cuando la ventana cambie, aparecerán barras de desplazamiento y se bloqueará el contenido.
Ventajas: Sencillo y cómodo, sin problemas de compatibilidad.
Desventajas: La página web no puede adaptarse al ancho de la pantalla del dispositivo del usuario.
2. Diseño fluido
También llamado diseño 100%. La unidad de ancho es porcentaje. Plantillas de diseño de uso común para diseño fluido: fijo izquierdo + adaptable derecho, ancho fijo izquierdo + adaptable medio.
Ventajas: Puede adaptarse a diferentes tamaños de pantalla.
Desventajas: la relación de pantalla es demasiado grande y las pantallas que son demasiado pequeñas o demasiado grandes para su diseño original no se pueden mostrar correctamente. Debido a que el ancho se define en porcentaje, la altura y el tamaño del texto se fijan principalmente en px.
3. Diseño responsivo
Al usar la configuración de metaetiquetas, el ancho de los elementos de la página se ajustará automáticamente a medida que se cambia el tamaño de la ventana. Adopte un enfoque combinado de diseño adaptable y diseño fluido para crear diseños fluidos para diferentes rangos de resolución de pantalla.
Ventajas: Adaptable a PC y terminales móviles. Si eres lo suficientemente paciente, los resultados serán perfectos.
Desventajas:
(1) Las consultas de medios son limitadas, es decir, se pueden enumerar y solo se pueden adaptar a la corriente principal.
(2) Para lograr suficientes tamaños de pantalla, la carga de trabajo no es pequeña y el diseño también requiere múltiples versiones.
4. Diseño flexible
Utiliza el atributo flex en CSS3.
Ventajas: sencillo, cómodo y rápido.
Desventajas: Con las nuevas características de CSS3, la compatibilidad del navegador es un dolor de cabeza. Además, la compatibilidad del navegador móvil con Flex no es la ideal.