Diseño y cuadrícula

Primero hablemos del conocimiento del diseño. Primero, tomemos un caso para implementar un diseño horizontal de tres columnas (ancho fijo izquierdo y derecho, adaptativo en el medio). Actualmente, existe un diseño del Santo Grial y dos alas voladoras. Diseño, diseño flexible y posicionamiento absoluto. Varios diseños clásicos de diseños.

Similitudes:

Diferencias:

Estructura de nodo DOM:

El diseño de doble ala utiliza un div más que el diseño del Santo Grial Utilice aproximadamente 4 atributos CSS menos, que son más directos e indirectos que la idea de diseño del Santo Grial.

Flex es la abreviatura de Flexible Box, que significa "diseño flexible" y se utiliza para proporcionar la máxima flexibilidad al modelo con forma de caja. Cualquier contenedor puede designarse como diseño Flex, y el diseño Flex se convertirá en la solución preferida para los navegadores modernos.

Posición de posicionamiento absoluto: absoluta hace que la posición del elemento sea independiente del flujo del documento, por lo que no ocupa espacio. PD: Esto es diferente del posicionamiento relativo, que en realidad se considera parte del modelo de posicionamiento de flujo normal, porque la posición del elemento es relativa a su posición en el flujo normal.

Cuadrícula

Se utiliza una matriz de cuadrícula regular para guiar y estandarizar el diseño y la distribución de la información en las páginas web. La más popular es dividir una cuadrícula regular en un área específica. y confíe en estas cuadrículas para un diseño regular.

El papel del diseño de cuadrícula

El uso del diseño de cuadrícula

Hoy en día, la mayoría de los diseños de marcos de interfaz de usuario diseñarán un sistema de cuadrícula, como bootstrap (jquery), elemento (vue), antD (reaccionar), etc.

El sistema de rasterización de Bootstrap adopta la idea de dividir el diseño de la página en 12 columnas y luego utiliza el módulo de control de clases predefinido para ocupar la proporción de ancho (porcentaje de ancho) de acuerdo con el ancho de la página para lograr un diseño receptivo. .

Bootstrap divide los tamaños de pantalla en 4 categorías. El punto clave principal es la consulta de medios @media.

La definición de diseño en el sitio web oficial es: cree un diseño de forma rápida y sencilla a través de las 24 columnas básicas. Element es un marco de interfaz de usuario desarrollado en base a vue.js, y su sistema de cuadrícula diseñado también es similar a. Bootstrap, el método flexible opcional satisface los navegadores modernos y el propósito del desarrollo de componentes es resolver el problema del posicionamiento del diseño básico.

Los componentes principales son Row y Col, donde Row es un contenedor de diseño de filas y Col es un contenedor de diseño de columnas.

En referencia al diseño responsivo de Bootstrap, se preestablecen cinco tamaños de responsivo: <. /p>

antD es un marco de interfaz de usuario backend de nivel empresarial desarrollado por el equipo de Ant Design basado en React. Toda el área de sugerencias de diseño de la cuadrícula se divide según el principio de 24 partes iguales

<. p> Admite diseño Flex. Permite la alineación horizontal de elementos secundarios dentro del nodo principal: izquierda, centro, derecha, igual ancho, dispersos. Entre elementos secundarios, se admiten la alineación superior, la alineación central vertical y la alineación inferior. Al mismo tiempo, se admite el orden para definir el orden de los elementos.

En referencia al diseño responsivo de Bootstrap, hay disponibles seis tamaños de respuesta preestablecidos:

¿Cómo implementar una rasterización básica?

Por lo general, un sistema de cuadrícula básico incluye:

Para establecer el ancho de todo el sistema de cuadrícula, necesitamos un contenedor. El ancho del contenedor suele ser del 100%, pero es posible que desees establecer el ancho máximo en ancho máximo para pantallas más grandes.

El elemento de fila se utiliza para evitar que la columna interna (columna) se desborde a otras filas. Clearfix se suele utilizar para limpiar flotadores porque el sistema de rejilla lo hacemos mediante flotadores.

El elemento columna es la parte central y más compleja del sistema reticular. Dado que el posicionamiento de las columnas se puede implementar de muchas maneras, también es necesario considerar factores como su ancho y su diseño responsivo.

Posición de la columna

Los flotadores, bloques en línea, display-table y display-flex pueden realizar el posicionamiento de las columnas en el diseño de la cuadrícula. Utilice flotante primero. Si las columnas están vacías, las columnas flotantes se pegarán una encima de la otra. Para evitar esto:

Ancho de columna

Dado que el ancho total del contenedor es 100%, queremos 6 columnas, por lo que el ancho de cada columna es: 100 / 6 = 16,66 < / p>

Aquí dividimos una fila en seis columnas. Mediante cálculos simples, también podemos definir múltiples anchos de las columnas.

Column Gutters (Column Gutters)

Dado que la unidad de ancho de la columna es un porcentaje sensible (%), el espaciado que damos a los elementos de la columna es una unidad fija de relleno (px unidad), para evitar cálculos complejos, especificamos todos los modelos de caja como tipo de caja de borde.

Para adaptar el diseño a más resoluciones sólo necesitamos cambiar el ancho de las columnas.

Por ejemplo, cuando el ancho de la pantalla es inferior a 1000 px, para simplificar el diseño, utilizamos el doble del ancho de la columna y una fila de seis columnas se convierte en una fila de tres columnas.

Cuando el ancho de la pantalla es inferior a 1000px