Patrones de diseño en el diseño y producción de páginas web estáticas

Es decir, diseño web tradicional, el tamaño de todos los elementos de la página web siempre está en px.

1. Características del diseño: independientemente del tamaño del navegador, el diseño de la página web siempre se muestra de acuerdo con el diseño cuando se escribió originalmente el código. Los sitios web de PC convencionales tienen un diseño estático (ancho fijo), es decir, se establece un ancho mínimo, de modo que si es menor que este ancho, aparecerá una barra de desplazamiento. Si es mayor que este ancho, el contenido estará centrado. y se agregará un fondo. Este diseño es muy común en las PC.

2. Método de diseño:

PC: diseño centrado, todos los estilos tienen ancho/alto absoluto (px), diseñe un diseño, use desplazamiento horizontal y vertical al ajustar el ancho y alto de la pantalla. Vea la sección de cobertura;

Dispositivos móviles: cree un sitio web móvil, diseñe un diseño independiente y utilice diferentes nombres de dominio, como wap. O M..

Dos formas de utilizar el diseño estático en el desarrollo móvil:

(1) Establezca ancho = 320 en la etiqueta viewportmeta, y cada elemento de la página también usa px. unidad. Al modificar dinámicamente la proporción inicial de la etiqueta con JS, la página escala proporcionalmente para ocupar toda la pantalla. (Ver desarrollo front-end-transformación de aplicaciones web rem)

(2) Establezca el contenido "ancho = 640, escalable por el usuario = No en la etiqueta viewportmeta, y cada elemento de la página también usa px como unidad Dado que 640px excede el ancho del teléfono, el navegador reducirá automáticamente la página a pantalla completa.

Ventajas: este diseño es el más simple para diseñadores y escritores de CSS, y no hay problemas de compatibilidad. /p>

Desventajas: Obviamente no podemos realizar diferentes actuaciones según el tamaño de la pantalla del usuario.

2 Diseño líquido (LiquidLayout)

Diseño líquido (también llamado "diseño líquido" ") se caracteriza por ajustar el ancho de los elementos de la página de acuerdo con la resolución de la pantalla, pero el diseño general permanece sin cambios. Sistema de valla representativo (sistema de cuadrícula).

El porcentaje de tamaño del área dividida principal en la página web (con min- * Se usa junto con el atributo max-*), por ejemplo, establezca el ancho del cuerpo de la página web en 80 y establezca el ancho mínimo en 960 px. La imagen también se procesa de manera similar (ancho: 100, El ancho máximo generalmente se establece en el tamaño de la imagen en sí para evitar que se bloquee. Estirar la distorsión.

1. cambiará, pero el diseño permanecerá sin cambios. Esto hará que los elementos cambien si la pantalla es demasiado grande o demasiado pequeña. No se puede mostrar todo normalmente.

2. porcentaje, y la altura está fijada principalmente por px. Se puede ajustar de acuerdo con el tamaño en tiempo real de la ventana gráfica y el elemento principal para adaptarse a varias resoluciones tanto como sea posible. Generalmente se usa junto con atributos como ancho máximo/. ancho mínimo para controlar el rango de flujo de tamaño para que no sea demasiado grande o demasiado pequeño para afectar la lectura.

En la historia temprana del desarrollo front-end web, se utilizó este método. para manejar pantallas de PC de diferentes tamaños (la diferencia en el tamaño de la pantalla en ese momento no era demasiado grande. También se usa comúnmente en el desarrollo móvil actual, pero sus deficiencias también son obvias: el principal problema es si el tamaño de la pantalla es grande). demasiado grande, no se puede mostrar normalmente en una pantalla que sea demasiado pequeña o demasiado grande que su diseño original. Debido a que el ancho se define por porcentaje, pero la altura y el tamaño del texto se fijan en su mayoría en px, el efecto de visualización en una pantalla grande. Los teléfonos móviles serán algo diferentes. El ancho de los elementos de la página se estira mucho, pero la altura y el tamaño del texto siguen siendo los mismos (es decir, estas cosas no pueden "fluir") y la visualización es muy inconsistente. >

En tercer lugar, AdaptiveLayout (diseño adaptativo).

La característica del diseño adaptativo es definir diseños para diferentes resoluciones de pantalla, es decir, crear múltiples diseños estáticos, cada diseño estático corresponde a una resolución de pantalla. rango.

Al cambiar la resolución de la pantalla se cambia entre diferentes secciones estáticas (la posición de los elementos de la página cambia), pero en cada diseño estático, los elementos de la página no cambian a medida que se cambia el tamaño de la ventana. El diseño adaptativo se puede considerar como una serie de diseños estáticos.

1. Función de diseño: cuando cambia la resolución de la pantalla, la posición de los elementos en la página cambiará, pero el tamaño no cambiará.

2. Método de diseño: utilice @media media para consultar y cambiar diferentes estilos para dispositivos de diferentes tamaños y medios. Bajo el excelente diseño del rango de respuesta, la mejor experiencia se puede brindar a los dispositivos dentro del rango de adaptación. El diseño en realidad está fijo en el mismo dispositivo.

Cuarto, ResponsiveLayout (diseño responsivo)

Con la aparición de la tecnología de consulta de medios en CSS3, surgió el concepto de diseño responsivo. El objetivo del diseño responsivo es garantizar que una página pueda mostrar resultados satisfactorios en todos los terminales (PC, teléfono móvil, reloj, navegador web del frigorífico, etc.). Para los escritores de CSS, la implementación no se limita a métodos específicos, generalmente es una combinación de diseño de flujo y diseño flexible, y se usa junto con la tecnología de consulta de medios. - Defina diseños por separado 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 medida que se ajusta la ventana. Es decir, cree múltiples diseños fluidos que correspondan a una variedad de resoluciones de pantalla. El diseño responsivo puede verse como la integración de los conceptos de diseño de flujo y diseño adaptativo.

La capacidad de respuesta casi se ha convertido en el estándar para un excelente diseño de página.

1. Funciones de diseño: Habrá un estilo de diseño debajo de cada resolución de pantalla, es decir, la posición y el tamaño de los elementos cambiarán.

2. Método de diseño: consulta de medios y diseño de flujo. Normalmente, @media Media Query y GridSystem se utilizan para diseños con unidades de diseño relativas. De hecho, es un término general para la tecnología que devuelve diferentes estilos de respuesta integral y flujo a diferentes dispositivos de una sola página web a través de CSS.