Después de obtener un borrador de diseño, ¿cómo debo desarrollar terminales móviles?
Este artículo encontró oro por primera vez: https://juejin.im/post/5d736747e51d4561ff66688c
Los que han salido a tontear tendrán que devolver el dinero tarde o temprano (￣Д ￣)┍.
Resolvamos algunos problemas:
Cuando se trata de ventana gráfica, antes siempre parecía bastante abrupto, pero cuando estaba trabajando en un proyecto móvil recientemente, de repente presté atención a algo que había sido ignorado. Cuando vi la metaetiqueta, de repente me di cuenta (o(╯□╰)o). Entonces, primero comprendamos la metaetiqueta. Comprendamos la metaetiqueta que se ha ignorado. Luego, veremos la ventana gráfica. ¿No es solo un valor del atributo de nombre en la metaetiqueta? ?
Entonces, ¿cuál es su función? Para comprender su función específica, primero debemos comprender algunos conocimientos básicos relevantes.
Viewport se refiere a la ventana del navegador, es decir, el área del navegador utilizada para mostrar páginas web. Es el área visible de la página web del usuario.
Las ventanas gráficas son diferentes en móvil y PC. La ventana gráfica en el lado de la PC es el área de la ventana del navegador, mientras que en el lado móvil hay tres conceptos de ventana gráfica diferentes: ventana gráfica de diseño, ventana gráfica visual y ventana gráfica ideal.
(? adaptación móvil de la ventana gráfica, lo que debe saber sobre la adaptación móvil)
La configuración básica anterior:
atributo de la ventana gráfica La función es realizar el diseño. La ventana gráfica se adapta al ancho de la pantalla escalando. width=device.width simplemente hace que el tamaño inicial de la ventana gráfica de diseño sea igual al ancho del dispositivo. La escala inicial establecida más adelante se usa para escalar el tamaño de la ventana gráfica de diseño, y el tamaño inicial predeterminado. de la ventana gráfica de diseño es igual al ancho del dispositivo, que es la llamada ventana gráfica ideal.
Convertir el borrador del diseño en contenido en la pantalla del teléfono móvil es similar a dibujar un mapa, que se reduce y se dibuja según una proporción determinada:
dpr (proporción de píxeles del dispositivo): relación de píxeles del dispositivo, es decir, la relación entre píxeles físicos y píxeles lógicos (píxeles CSS) del dispositivo.
Borrador de diseño: el borrador de diseño de 750 px de ancho proporcionado por el diseñador se basa en la unidad de píxel del dispositivo (píxel físico).
Escritura de páginas web: los píxeles CSS escritos por los ingenieros de front-end al codificar páginas web deben convertirse de acuerdo con la proporción de píxeles del dispositivo.
La escala afectará el tamaño de la ventana gráfica de diseño. Cuando acercamos y alejamos la página en el lado móvil, en realidad estamos cambiando el tamaño de los píxeles CSS, y el propósito de la escala es hacer. los píxeles CSS se adaptan. Qué hacer Eso es primero ampliar la ventana gráfica de diseño dpr veces y luego escalar la vista general en el múltiplo correspondiente para adaptarse al tamaño del dispositivo, de modo que los píxeles CSS y los píxeles del dispositivo físico puedan ser uno a uno.
La solución de Taobao usa dpr para resolver el problema de 1px, pero la solución de NetEase no introduce dpr. La ventana gráfica de diseño no se amplía y no se escala toda la página, pero no afecta la proporción con el diseño. dibujo.
? Realmente, la adaptación del tamaño del terminal móvil no tiene nada que ver con DPR
? Explicación detallada de los conceptos relacionados con la adaptación
Después de comprender los problemas anteriores, lo haremos. Después de dominar la esencia de la adaptación de terminales móviles, podemos realizar un desarrollo práctico.
A través de la conversión rem anterior, podemos saber cómo convertir el px del elemento en el borrador visual (750px) en rem.
(1) Establezca el tamaño de fuente html, como dividir la pantalla del teléfono móvil en 10 partes:
(2) Suponiendo que el ancho del elemento es 300 px, el ancho del elemento es:
La conversión automática se puede lograr mediante las siguientes soluciones:
? Solución Scss
?
? postcss -pxtorem solución
Haga clic en MÉTRICAS DEL DISPOSITIVO para ver más parámetros del dispositivo terminal.