¿Cuántas ranuras se utilizaron en las 12 columnas de la mampara de 1920?
1. ¿Qué es una cuadrícula?
1. El origen de la grilla
Una grilla es una grilla. ¿Es esta una cuadrícula normal?
Jaja, ¿no es eso muy realista?
La traducción al inglés es grid. En cuanto a por qué ahora se llama grid, no lo sé.
Las cuadrículas se utilizaron por primera vez en el diseño gráfico. Se originó en Europa occidental a principios del siglo XX y se perfeccionó en Suiza en los años cincuenta. Guíe el diseño a través de una cuadrícula regular.
El diseño de cuadrícula también se usa ampliamente en pantallas. No solo sirve para el diseño, sino que también juega un gran papel en el desarrollo responsivo. Aunque la red que mencionó el desarrollador es diferente a lo que entendemos, también reduce los costos de comunicación.
2. Cuadrícula Cuadrícula
La cuadrícula es la unidad más pequeña que constituye el sistema de cuadrícula de páginas.
En el lado de la PC, generalmente usamos 8 como unidad mínima de la cuadrícula. ?
¿Por qué utilizar 8?
Intenta mantener las unidades uniformes para que sigan siendo legibles cuando se acerca o se aleja la página. Bajo la premisa de garantizar un número par, simplemente utilice "2, 4, 6, 8, 10, 12 ..." como unidad mínima.
Normalmente, el lado del PC está fijo horizontalmente y se puede desplazar verticalmente. Según las estadísticas nacionales de resolución de PC de 2019, "4,8" puede ser divisible por 1366. Debido a que 4 es demasiado pequeño, no es fácil para los usuarios comunes distinguirlo intuitivamente, por lo que elegimos 8 como la unidad más pequeña. Todos los valores posteriores son múltiplos de 8. ?
3. Columnas y ranuras
La columna es el área donde se muestra el contenido.
El lado de la PC suele tener 12 cuadrículas o 24 cuadrículas, lo que significa que hay 12 o 24 columnas verticalmente.
La ranura es el espacio entre dos columnas. El número de espacios es uno menos que el número de columnas.
Supongamos que el ancho de la cuadrícula es w, el ancho de la columna es c y el ancho de la ranura es g. Si hay N columnas, hay N-1 ranuras.
Se puede inferir y calcular que W=N*C+(N-1)G.
Olvídate del concepto de columna + ranura = columna. (Personalmente, creo que no es posible. Si tienen opiniones diferentes, pueden discutirlas).
¿Por qué utilizar 12 o 24 columnas?
Las de 12 y 24 columnas se utilizan habitualmente en PC. La mayoría de terminales móviles utilizan 4 columnas. Cuanto más fina es la división, más rico es el contenido de los cambios. Pero si es demasiado fina, la página quedará muy fragmentada y la sensación de diferencia y ritmo se reducirá. La columna 12 o 24 se puede dividir en 2 partes iguales, 3 partes iguales, 4 partes iguales, 6 partes iguales y 12 partes iguales, y también se puede dividir en 1:2:1, 1:3:2, 1:2: 65438.
La siguiente es una captura de pantalla de JD. página de inicio de com. Deben ser 12 cuadrados, divididos en 2 partes iguales, 4 partes iguales, 6 partes iguales, 2:6:2:2, 2:10.
4. Margen
El margen fuera del ancho de la cuadrícula, generalmente una distancia adaptativa. Por ejemplo, para responder entre una pantalla pequeña y una pantalla grande, es necesario cambiar los márgenes.
5. Contenedor de ancho de cuadrícula
El ancho de la cuadrícula es el ancho del área que requiere diseño de cuadrícula, no el ancho mostrado.
Por ejemplo, supongamos que utilizamos una pantalla de 1920 píxeles como mesa de trabajo y una cuadrícula de 24 columnas. Establezca el ancho de la columna en 32px4 (unidades atómicas) y el ancho de la ranura en 16px (2 unidades atómicas).
Entonces el ancho de la cuadrícula W = 24 columnas x 32 columnas de ancho + 23 columnas x 16 espacios de ancho = 1136 px. El resto del ancho es adaptativo.
El ancho de la pantalla es 1920, como se muestra a continuación:?
El contenido de los principios de aplicación debe recaer en la columna, no en el fregadero.
El elemento principal debe estar alineado con la cuadrícula y los elementos secundarios se pueden usar nuevamente como cuadrícula.
Intente dividirlo en partes iguales de acuerdo con la cuadrícula, y también puede dividirlo en cinco partes iguales, por lo que el ingeniero de front-end necesita cambiar la estructura subyacente.
En segundo lugar, ¿por qué utilizar una cuadrícula?
¿No podemos hacer diseño de grillas? ¡Está bien!
Vale, sin cuadrícula. ningún problema. Muchas obras excelentes no siguen deliberadamente la cuadrícula tradicional, sino que parecen más flexibles. Pero hay que conocer las reglas antes de romperlas.
Hacer el diseño más regular y lógico.
Basado en el diseño de cuadrícula, el texto y las imágenes se organizan en la página de acuerdo con ciertas reglas, de modo que el diseño no solo sea visualmente hermoso, sino que también tenga una lógica estricta y un cierto ritmo.
Conduce al trabajo en equipo
Con un estándar de cuadrícula unificado, puede explicar por qué "este ancho debe ser de 120 px, ese ancho no puede ser de 140 px ...". Los costos de comunicación entre los equipos de diseño se reducen considerablemente. Al mismo tiempo, puede mejorar la coherencia del trabajo en equipo.
Diseño Responsive
Hoy en día, los dispositivos que utilizamos no se limitan a ordenadores o teléfonos móviles. Los usuarios pueden utilizar dispositivos de cualquier tamaño para acceder a nuestros diseños. Entonces no podemos diseñar para un solo dispositivo. Cómo construir dinámicamente nuestro diseño para hacer frente a dispositivos de diferentes tamaños es una cuestión que los diseñadores deben considerar desde el principio.
En tercer lugar, ¿cómo responde el sistema de red?
1. ¿Qué es el diseño responsivo?
En términos generales, para mantener el diseño razonable y hermoso en dispositivos de varios tamaños, los usuarios tendrán una buena experiencia al usar nuestros productos en teléfonos móviles, tabletas y computadoras. Cuando se detectan diferentes tamaños de pantalla, algunos valores de la cuadrícula se cambian a nuestros patrones prediseñados, lo que se denomina diseño responsivo.
2. ¿Cómo responde la red eléctrica?
Cuadrícula fija
El ancho de columnas y espacios es fijo y no cambia con el tamaño de la pantalla. El número de columnas de la cuadrícula cambia cuando alcanza un cierto umbral.
Supongamos que utilizamos el tamaño de pantalla de 1920 como mesa de trabajo y el ancho de la cuadrícula como 1136, como se muestra a continuación.
Si miras la página debajo de la pantalla 2560, el espacio en blanco en ambos lados se hará más grande, pero el contenido en el medio permanecerá sin cambios.
Cuando veas la página en una pantalla 1024, aparecerá una barra de desplazamiento horizontal, como si la página hubiera sido cortada.
En pantallas más pequeñas, el número de columnas de la cuadrícula cambia. Pero no importa cómo cambie, el ancho de las columnas y las ranuras permanece sin cambios.
La disposición del diseño no cambiará entre valores críticos. Los cambios específicos en el número de columnas en la cuadrícula de valores críticos deben aclararse a medida que avanza el desarrollo. La cantidad de valores críticos que se deben establecer depende de la situación real.
Ventajas: El diseño tiene el más alto grado de restauración y el estilo central permanece sin cambios sin importar cuál sea la pantalla.
Desventajas: Habrá barras de desplazamiento en pantallas pequeñas. Hay demasiado espacio en blanco a la izquierda y a la derecha de una pantalla grande, lo que es una pérdida de espacio.
Cuadrícula flotante
El ancho de las columnas cambia con el tamaño de la pantalla. El ancho de la ranura es fijo. El número de columnas de la cuadrícula cambia cuando alcanza un cierto umbral.
Supongamos que utilizamos el tamaño de pantalla de 1920 como mesa de trabajo y el ancho de la cuadrícula como 1136. Vea la imagen a continuación.
Al visualizar la página en una pantalla 2560, el ancho de la ranura permanece sin cambios pero el ancho de la columna cambia. ?
Mirando la página en la pantalla 1024, el ancho de la ranura permanece sin cambios pero el ancho de la columna cambia. ?
El problema es que los píxeles de dicha columna no sólo son un número par, sino que tampoco son un número entero. ¿Qué debo hacer, cómo mostrarlos en la pantalla? No importa, algunas tarjetas pueden tener 351 píxeles y otras 356 píxeles, por lo que es difícil ver una diferencia de 1 píxel en la pantalla. Para adaptarse a pantallas de diferentes tamaños, este píxel sigue siendo tolerable.
Debe explicar el estilo de diseño en los elementos secundarios y dónde se puede cambiar en la parte frontal. (Por ejemplo, cuando el enlace cambia, el icono de la tarjeta permanece alineado a la izquierda y el margen izquierdo permanece sin cambios. El texto está alineado a la izquierda y el número de palabras por línea es adaptable).
Ventajas : En diferentes pantallas, se acercará o alejará automáticamente para aprovechar al máximo el espacio.
Desventajas: debido a que el ancho de la columna no es fijo, el estilo puede deformarse. El texto puede tener varias líneas o una línea larga.
Cuadrícula mixta
En una misma página, se puede dividir en múltiples áreas, cada área tiene diferentes tipos de cuadrícula. ?
4. Ejemplo: construir un sistema de cuadrícula de fondo desde 0.
1. Determinar la línea base de la grilla.
Establecemos la unidad mínima y el número de grillas en función de nuestros propios escenarios comerciales.
Tomamos 8 como la distancia mínima de la unidad atómica, entonces todos los valores son múltiplos de 8. Por ejemplo, el número de cuadrículas es 12.
2. Determinar el área de la cuadrícula
Los sistemas backend son diferentes de las páginas web. A menudo tienen una lógica compleja y grandes cantidades de datos, y necesitan obtener y comparar una gran cantidad de información. al mismo tiempo.
La información es mayoritariamente forma y forma. Por eso el ancho de la pantalla es importante. Por lo tanto, es común seleccionar todos los estilos acolchados y descartar los estilos con espacios a ambos lados.
Elegimos la mesa de trabajo con el ratio máximo de equipamiento de 1920x1080. (Aquí se utiliza principalmente la cuadrícula vertical y no se tiene en cuenta la altura de la barra de pestañas y de la barra de menú que viene con el navegador).
Cree el siguiente estilo. Los valores son solo de referencia. copie con precaución. ?
Colocar contenido
Colocar contenido en columnas, no al principio y al final, ni en espacios. La altura del contenido también debe seguir siendo múltiplo de 8.
4. Contramedidas
Respuesta de pantalla grande/pequeña
Cuando la pantalla se hace más grande, la barra de menú azul a la izquierda mantiene el mismo ancho (cuadrícula de red fija). ). Las ranuras en el área de la cuadrícula de la derecha permanecen sin cambios y las columnas se amplían proporcionalmente. (Cuadrícula flotante)
Cuando la pantalla se hace más pequeña, la barra de menú azul a la izquierda permanece del mismo ancho (Cuadrícula fija). ¿Ranura del área de la cuadrícula derecha sin cambios, columnas reducidas (cuadrícula de flujo)?
Respuesta de la tableta
Cuando la pantalla se reduce al tamaño de una tableta, el contenido del área de la cuadrícula no se puede mostrar con normalidad, lo que afecta en gran medida a la experiencia. Entonces, el número de cuadrículas se cambia a 6 columnas y la barra de menú se expande al modo simple. Esto completa la adaptación del extremo plano.
Respuesta del teléfono móvil
Cuando la pantalla tiene el tamaño de iPhone8, 8P y otros teléfonos móviles..., el área de la cuadrícula cambia a menos cuadrículas y la barra de menú cambia a un botón de hamburguesa. También puede ocultar algunos contenidos, como consultas comunes de servicio al cliente y recomendaciones relacionadas. ?
Una cuadrícula de resumen es una cuadrícula.
Al adaptarse, el ancho de la ranura suele ser constante y el ancho de la columna es adaptable.
El área de la cuadrícula es el área de contenido, no el área de la pantalla.
Tipo de respuesta de la red: ¿red fija, red fluida, red híbrida?
Otra información útil Xiaogang: ¿Te enseñaré cómo crear un lenguaje de diseño estándar: el color? zhuanlan.zhihu.com? Xiaogang: ¿Enseñarte cómo crear un lenguaje de diseño estándar: un ícono? zhuanlan.zhihu.com? Xiaogang: ¿Enseñarte cómo crear una biblioteca de componentes de lenguaje de diseño estándar? zhuanlan.zhihu.com? Xiaogang: ¿Enseñarte cómo crear un lenguaje de diseño estándar: texto? zhuanlan.zhihu.com? Xiaogang: ¿Enseñarle cómo crear un lenguaje de diseño estándar: principios de diseño? zhuanlan.zhihu.com? Xiaogang: ¿Enseñarte cómo crear un lenguaje de diseño estándar: redacción publicitaria? zhuanlan.zhihu.com
¿Cómo utilizar generalmente el diseño de cuadrícula?
Hotel del distrito de Qingdao Shinan
Recomendaciones destacadas
Publicidad
Un ejemplo de implementación de arranque del efecto de diseño de cuadrícula clásico, con código fuente de demostración.
8 descargas 0 comentarios
165438+28 de octubre de 2020
Plataforma de crecimiento y práctica Bootstrap (diseño de cuadrícula)
150 lecturas 0 comentarios 0 me gusta.
20 de julio de 2021
Ejemplo de diseño de cuadrícula de Bootstrap4_Bootstrap utiliza el código fuente de demostración para implementar un ejemplo de efecto de diseño de cuadrícula clásico.
577 visitas 0 comentarios 0 me gusta.
2021 1 14
Bootstrap3: Uso básico del sistema grid
1082 lecturas, 0 comentarios, 0 me gusta.
5 de mayo de 2020
Diseño de cuadrícula (Grid)
6315 vistas 0 comentarios 1 me gusta.
20 de julio de 2020
Usando diseño de cuadrícula
1440 vistas 0 comentarios 1 me gusta.
28 de mayo de 2022
Descarga de juego móvil genuino y legendario
Recomendaciones seleccionadas
Publicidad
Cómo utilizar La regla de los 3 pasos de la interfaz de cuadrícula para el diseño de cuadrícula en circunstancias normales, los principiantes definitivamente no se confundirán.
1761 visitas 0 comentarios 0 me gusta.
65438+22 de febrero de 2020
Análisis de diseño de cuadrícula de Bootstrap
2187 lecturas, 0 comentarios, 0 me gusta.
10 de mayo de 2022
Uso básico del sistema bootstrap grid
1373 visitas 0 comentarios 1 me gusta.
30 de octubre de 2019
Cómo usar el diseño de cuadrícula en general_Establezca la cuadrícula y proporcione razonablemente para que el diseño sea más amigable
2449 lecturas 0 comentarios 0 me gusta.
2021 1 16
Principios del desarrollo responsivo y explicación detallada del diseño de cuadrícula guiada
1641 lecturas 1 comentario 3 me gusta
27 de marzo , 2022
Cómo utilizar el sistema de cuadrícula (diseño) de diseño de cuadrícula_Bootstrap que se debe aprender todos los días.
241 lecturas 0 comentarios 0 me gusta
65438+22 de febrero de 2020
Notas de estudio de Bootstrap4 (1)
296 lecturas 0 comentarios 1 me gusta
9 de abril de 2021
Utilice el diseño de cuadrícula de Bootstrap para implementar una demostración sencilla.
341 lee 0 comentarios 0 me gusta
165438+20 de octubre de 2020
Ejemplo de diseño del sistema de cuadrícula Bootstrap3
3479 lee 0 comentarios 0 gustos.
2065438+2 de mayo de 2009
Generalmente cómo usar el diseño de cuadrícula_Cómo usar el diseño de cuadrícula
1196 lee 0 comentarios 0 me gusta.
65438+22 de febrero de 2020
Generalmente, cómo usar el diseño de cuadrícula_Oye, es hora de aprender el diseño de cuadrícula.
80 lecturas 0 comentarios 0 me gusta
2021 1 16
Diseño de dos columnas (ancho fijo a la izquierda, adaptable a la derecha), cinco métodos de implementación.
2219 lee 0 comentarios 3 me gusta
2019 10 de junio 11
Diseño de cuadrícula Bootstrap4 ejemplo_sistema de cuadrícula bootstrap4, diseño
282 lee 0 comentarios 0 me gusta
65438+24 de febrero de 2020
Bootstrap4 p-_¡Aprendamos Bootstrap4 juntos! (Parte 2)
155 lecturas, 0 comentarios, 0 me gusta
165438+20 de octubre de 2020
Ir a la página de inicio
Ver más Mucho contenido popular