Prefacio: Con respecto a la adaptación del terminal móvil, hay muchas formas de lograrlo, incluida la inicialización js, la configuración de metaetiquetas, la configuración de etiquetas css y otras combinaciones de uno o más métodos. Algunos métodos son demasiado engorrosos en mi opinión. Hoy hablaremos de un método adaptativo de terminal móvil muy simple que solo requiere unas pocas líneas de código CSS y una calculadora.
1. Varios conceptos importantes (píxeles físicos, píxeles css, DPR):
1. Píxeles físicos: como su nombre lo indica, cuando se produce el teléfono móvil (que es más amigable para escribir, el teléfono móvil se usa para referirse al terminal móvil más tarde), los píxeles en la pantalla (los píxeles aquí son un concepto borroso, solo entiendan) El número es el píxel físico. Tomando iphone6 como ejemplo (Ip6 se usa para referirse al teléfono móvil [/ gracioso]), el píxel físico horizontal es 750px y el vertical es 1334px.
2. Píxeles CSS: cuando el teléfono móvil realiza tareas de visualización, el tamaño de los píxeles CSS que establecemos al escribir el código. Por ejemplo: cuando necesitamos mostrar un div con ancho de pantalla completo en ip6, necesitamos establecer el ancho del div en 375px ;
3. DPR: píxeles físicos / píxeles css = DPR. Por supuesto, esta es mi comprensión personal. Bienvenido a corregirme.
P: ¿Por qué hay una distinción entre píxeles físicos y píxeles CSS?
R: La comprensión personal es que cuanto más grandes sean los píxeles físicos, mejor. Cuanto más grandes sean los píxeles que puede mostrar el dispositivo, mayor será la resolución de la pantalla. Pero si la pantalla en sí es pequeña, y los píxeles físicos son grandes, y los píxeles físicos se usan para mostrar el contenido, ¿no sería necesario sostener una lupa para ver con claridad? Por lo tanto, se necesita la existencia de DPR, es decir, la relación de píxeles físicos a píxeles CSS. En otras palabras: cuántos píxeles físicos muestran un píxel CSS.
En segundo lugar, los atributos CSS necesarios (vw, rem):
1. vw: vw es también una unidad relativa. Vw divide el ancho de la pantalla en 100 partes iguales. 100vw es el ancho de píxeles de pantalla completa css del dispositivo actual. En ip6: 100vw = 375px (píxeles css) ;
2. rem: tamaño de fuente del nodo raíz relativo, una unidad relativa. Es difícil de entender, así que para dar un ejemplo:
: root { font-size : 30px ; } div { ancho : 1rem ; }
En el código anterior: establecemos el tamaño de fuente de la etiqueta raíz (: raíz === html) en 30px, luego establecemos el ancho del elemento div de esta página en 1rem, luego el ancho del div es 30px. Del mismo modo, si desea establecer el ancho div en 60px, simplemente escriba 2rem.
3. Demanda y método de cálculo ( tomando ip6 como ejemplo ):
1. Nuestras necesidades: el borrador del diseño proporcionado por el diseñador es de 750px de precisión, tamaño estándar ip6, queremos escribir uniformemente el tamaño como rem al escribir la página, y la relación con el borrador del diseño es 1: 100, es decir: el borrador del diseño está marcado 100px = css code 1rem (no se preocupe por qué 1: 100, el foco está en la adaptación);
2. Proceso de cálculo:
Conocido 100vw = 375px (píxeles css), luego 1vw = 3.75px (píxeles css);
El borrador de diseño conocido de 100px (píxeles físicos) = 1rem, de acuerdo con el valor DPR de ip6 es 2, se puede obtener fácilmente: 1rem = 50px (píxeles css);
1rem =？ vw ——————> 50 / 3.75 = 13.333333333333 ...
En resumen: solo necesitamos establecer el tamaño de fuente del nodo raíz en 13.333333333333vw , y luego usar rem como la unidad para definir el tamaño de píxel al escribir css, es decir, toda la página con ip6 como borrador de diseño estándar se puede realizar en todos los dispositivos móviles Adaptado
3. Principio: usando el método que vw es una unidad relativa al tamaño de pantalla del dispositivo.
Cuarto, práctica específica (para los estudiantes que no entienden el principio anterior, no importa. A continuación se ofrece una configuración CSS básica del código del proyecto con ip6 como borrador de diseño ):
: raíz { margen : 0 ; relleno : 0 ; estilo de lista : ninguno ; tamaño de fuente : 13.333333333333333333vw ; } cuerpo { font-size : 0 ; } : raíz, cuerpo, # raíz { altura : 100% ; ancho : 100% ; } .App { font-size : 0.3rem ; ancho : 100% ; altura :100% ; }
Debe explicarse que la etiqueta del cuerpo establece específicamente un tamaño de fuente en 0, esto es para eliminar la brecha entre las etiquetas de elementos secundarios.
#root y .App son identificadores autodefinidos y selectores de clase. Quiero inicializar el tamaño de fuente a 30px, así que agregué tamaño de fuente: 0.3rem a .App.
Cinco, el final
Echemos un vistazo al efecto
El cuadro superior se escribe usando rem como unidad, y el inferior usa px. Ambos también aparecen como cuadrados de 100 px en ip6. (Algunas personas pueden preguntarse por qué este lugar es 2rem en lugar de 1rem, porque en la imagen de 750 píxeles de ancho del borrador del diseño, el cuadrado es de 200 píxeles)
Cuando cambiamos el dispositivo a iPad Pro, se convirtieron en lo siguiente:
Se puede ver que el cuadro rojo se da cuenta de la autoadaptación.