El diseño de fluido elástico CSS cumple con la pantalla de contenido diferente

Hoy, cuando los monitores de los usuarios se están volviendo cada vez más grandes, el diseño de ancho sólido 1024*768 anterior se está volviendo cada vez más fuera de lugar. .

Por supuesto, para reducir el desperdicio de este tipo de pantalla, la adopción del diseño de fluido elástico es la mejor solución. Sin embargo, debido a varias restricciones, las páginas web actuales no están completamente equipadas con las condiciones para adoptar completamente el diseño elástico de fluidos (especialmente la destrucción sin escrúpulos de los estándares por parte de los fabricantes de navegadores y el soporte incompleto de los estándares CSS, etc.). Como intermediarios entre usuarios y fabricantes, solo podemos adaptarnos a la brecha entre los dos con una actitud compatible. Entonces, como solución de transición, existe un diseño: diseño elástico + de ancho sólido.

La elasticidad mencionada aquí se refiere a la adaptación de fondo al ancho de la pantalla, mientras que el ancho sólido significa que el contenido principal se puede centrar automáticamente tanto en la pantalla ancha como en la pantalla estrecha. Sobrevivir en la brecha para satisfacer las necesidades de los usuarios con diferentes tamaños y resoluciones. El diseño que se muestra en la figura a continuación es un ejemplo típico.

Hablemos menos tonterías y volvamos al grano, creemos una estructura de diseño.

Primero construya la capa estructural:

Analicemos la capa de estructura. para diseñar de esta manera?

Configuramos los contenedores de envoltura y pie de página en un ancho 100% para adaptarse automáticamente al ancho de la pantalla. Y también coloque el área del encabezado del encabezado en 100% de ancho. De esta manera, podemos insertar una imagen de mosaico horizontalmente en el encabezado y el pie de página, de modo que el fondo del encabezado y el pie de página puedan llenar horizontalmente todo el espacio de la pantalla debajo de la pantalla grande.

Como contenido principal, nuestro enfoque general es dejarlo centrar y dejar espacios en blanco en ambos lados cuando la resolución se hace más grande. Debido a que el área del encabezado se ha establecido en un ancho del 100%, agregamos una capa de contenedor en el encabezado del encabezado, que sirve como portador del contenido de texto del encabezado real. Déjelo centrar automáticamente.

De esta manera, el texto del encabezado flota la capa superior del Haader.

Del mismo modo, el pie de página también se puede implementar de esta manera.

En la capa de estructura anterior, no utilicé este método en el área de contenido medio, pero hice un poco de solución. ¿Qué debemos hacer si no parecemos demasiado huecos en ambos lados del texto bajo una gran resolución? Por supuesto, para reducir la anidación, podemos adoptar soluciones. Podemos agregar una imagen de gran tamaño al fondo en el cuerpo y usar la posición de fondo para colocar la imagen en el centro, de modo que se muestren las imágenes en ambos lados del área de contenido.

Este blog es un caso específico. y el contenido del texto siempre se muestra en el centro.

Para demostrar el efecto, agregamos algunos otros ajustes de color, y el estilo final es el siguiente: