Para conocer los cuatro métodos de diseño móvil más populares, simplemente lea este artículo.

Como todos sabemos, el lado de la PC está actualmente dividido en tres compañías, es decir, tres núcleos (webkit, Blink, gecko, por supuesto, incluido IE, que está a punto de cambiar su núcleo). son cuatro. En cuanto a nuestro terminal móvil, está basado en WebKit, por lo que cuando desarrollas la web para terminales móviles, solo debes considerar la adaptación de WebKit. ¿Qué te parece?

Veamos primero qué es una ventana gráfica. La ventana gráfica es el área de la pantalla donde el navegador muestra el contenido de la página. Las ventanas gráficas se pueden dividir en ventanas gráficas de diseño, ventanas gráficas visuales y ventanas gráficas ideales, que se pueden dividir en cuatro tipos

Generalmente, los navegadores en dispositivos móviles tienen una ventana gráfica de diseño configurada de forma predeterminada para resolver los primeros problemas. mostrado en el teléfono móvil.

iOS y Android básicamente configuran la resolución de esta ventana gráfica en 980 px, por lo que la mayoría de las páginas web en la PC se pueden representar en el teléfono móvil, pero los elementos parecen muy pequeños. Generalmente, la página web se puede escalar manualmente. por defecto. .

Literalmente, es la zona del sitio web que están viendo los usuarios. Nota: Es el área del sitio web.

Podemos operar la ventana gráfica haciendo zoom, pero no afectará la ventana gráfica de diseño, que aún mantiene su ancho original.

Configurar para que el sitio web tenga el ancho de navegación y lectura más ideal en el terminal móvil

La ventana gráfica ideal es el tamaño de ventana gráfica más ideal para el dispositivo

Debe agregar manualmente la etiqueta meta viewport para notificar al navegador de la operación

El propósito principal de la etiqueta meta viewport: el ancho de la ventana gráfica de diseño debe ser consistente con el ancho de la ventana gráfica ideal Una comprensión simple es que el dispositivo tiene ¿Qué ancho tiene la ventana gráfica de nuestro diseño?

La configuración de ventana gráfica más estándar

El ancho de la ventana gráfica es consistente con el dispositivo

Los usuarios no pueden hacer zoom por sí mismos

La relación de zoom máxima permitida es 1.0

El zoom mínimo permitido la relación es 1,0

ps: Nota 2 El problema de duplicar o triplicar la imagen

El diseño fluido es un diseño porcentual, también conocido como diseño de píxeles no fijos.

Establece el ancho del cuadro en un porcentaje para escalar según el ancho de la pantalla. No está limitado por píxeles fijos y el contenido se llena en ambos lados.

El método de diseño de flujo es un método de diseño común utilizado en el desarrollo web móvil.

Después de que el cuadro principal enciende display: flex, el valor predeterminado no es ajustar, así que use flex-wrap: wrap para ajustarlo

Use justify-content: space-; around; para hacer que su hijo distribuya uniformemente el espacio entre los ejes principales de la caja

Utilice align-content: space-around para distribuir uniformemente el espacio entre los ejes laterales de sus subcajas

Opción 1

①Supongamos que el borrador del diseño es de 750px

② Supongamos que dividimos toda la pantalla en 15 partes iguales (los diferentes estándares de división pueden ser 20 o 10 partes iguales)

③Cada parte se usa como un tamaño de fuente html, aquí es 50px

④ Entonces, en un dispositivo de 320px, ¿el tamaño de fuente es 320/15? > ⑤ Divida el tamaño de los elementos de nuestra página por diferentes fuentes html. Encontrará que sus proporciones siguen siendo las mismas en tamaño

⑥Por ejemplo, utilizamos 750 como borrador de diseño estándar

⑦Un elemento de página de 100-100 píxeles en una pantalla de 750 es 100/50. ¿Se convierte a rem? ¿Es 2rem 2rem? La proporción es de 1 a 1

⑧320, el tamaño de fuente html es 21,33, luego 2rem. =42.66px? En este momento, ¿el ancho y el alto son 42.66? Pero la relación entre ancho y alto sigue siendo de 1 a 1

⑨ ¿Pero se puede lograr el efecto de escala igual? de cuadros de elementos de página

Resumen:

① La fórmula final: valor rem del elemento de página =? valor del elemento de página (px) /? (ancho de pantalla? /? número de copias divididas )

②El ancho de la pantalla/número de copias divididas es htmlfont-size Tamaño

③O: valor rem del elemento de página =?

Opción 2

1. consulta de medios menos rem

2.lflexible.js rem

La capacidad de respuesta requiere un padre como contenedor de diseño cooperar con elementos secundarios para lograr efectos cambiantes.

El principio es utilizar consultas de medios para cambiar el tamaño del contenedor de diseño en diferentes pantallas y luego cambiar la disposición y el tamaño de los subelementos internos para lograr diferentes diseños y estilos de página en diferentes pantallas cambian.

División de tamaño de la plantilla del contenedor principal

Pantalla ultrapequeña (teléfono móvil, menos de 768 px): establezca el ancho en 100

Pantalla pequeña (tableta, mayor o igual a 768px) ): establece el ancho en 750px

Pantalla mediana (monitor de escritorio, mayor o igual a 992px): establece el ancho en 970px

Pantalla grande ( monitor de escritorio grande, mayor o igual a 1200px): Establece el ancho en 1170px

Pero también podemos definir las divisiones nosotros mismos según la situación real

Usar directamente los estilos predefinidos de Bootstrap

Modifica los estilos originales de Bootstrap y presta atención a los pesos Pregunta

La clave para aprender bien Bootstrap es saber qué estilos define y qué efectos pueden lograr estos estilos