La solución de respuesta h5 más utilizada para terminales móviles en los últimos años es la solución rem. Esto requiere calcular el tamaño de fuente del elemento raíz para lograr capacidad de respuesta.
Pero esta solución también tiene una desventaja, es decir, cuando el tamaño de fuente no es un número entero, algunas fuentes usan unidades rem, lo que causará problemas con el tamaño de visualización de la fuente. Esto sigue siendo un dolor de cabeza para el desarrollo front-end de proyectos. con altos requisitos de restauración visual Una cosa.
Resolver la capacidad de respuesta del front-end no es más que poder mostrar normalmente en diferentes dispositivos. Aquí presentamos una solución receptiva que no requiere el método rem. Utilice px directamente. De lo que estamos hablando aquí es del borrador del diseño basado en 750px. ¿Cuántos px mediste en el borrador del diseño en el estilo?
Escribe directamente cuántos px. ¿No es esto muy rápido y no requiere conversión rem?
Aquí utilizamos la escala de transformación para escalar el tamaño de la página y lograr capacidad de respuesta.
Código central:
let screenMatch = () => { document.body.style.setProperty('visibilidad', 'oculto') let page = document.getElementById(page); let _scale = window.outerWidth/750; , 0 0); page.style.setProperty(transformar, escala(+ _scale + )); page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, escala(+ _scale + )); setTimeout(() => { page.style.setProperty(transformOrigin) , 0 0); page.style.setProperty(transformar, escala(+ _scale + )); page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, escala(+ _scale + )); ') }, 100); } screenMatch(); ventana.onresize = screenMatch;En el código anterior, el nodo con la identificación de la página es el nodo inicial de todo el elemento de la página y el primer elemento debajo del cuerpo. Aquí body/html necesita establecer min-height:100%;height:100%;
De hecho, también podemos usar unidades px en mini programas, pero habrá algunos errores de fuente cuando usemos transform en mini programas. Finalmente, simplemente cambiamos el atributo de zoom y usamos -webkit-zoom por compatibilidad. El código central no es muy diferente de h5. Lo mismo es el tamaño del zoom.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.