Eliminar tamaños predeterminados para todas las pantallas

Los proyectos de visualización en pantalla grande deben considerar diferentes tamaños de pantalla al restaurar los dibujos de diseño, por lo que se necesitan soluciones de adaptación dinámica para restaurar los dibujos de diseño tanto como sea posible.

La proporción del dibujo de diseño es 16/9. Es necesario asegurarse de que la proporción de la página de pantalla grande permanezca sin cambios en diferentes tamaños de pantalla (tamaño de la ventana gráfica del navegador) y adaptar automáticamente el elemento y la fuente. Tamaño según el tamaño de la pantalla.

El tamaño de la imagen de diseño es 16:9 y hay dos posibilidades para el tamaño de la pantalla:

rem es el tamaño de fuente del elemento lt;htmlgt y el valor predeterminado es 16px; (tamaño de fuente predeterminado del navegador)

em es el ancho de "una palabra" en el ancho de fuente

tamaño de píxel en px

Considerando la necesidad de una adaptación dinámica, no se pueden usar unidades de píxeles, por lo que la unidad estándar para el ancho de la pantalla es el ancho de visualización de la página/100 = 1rem, que puede restaurar perfectamente el diseño;

Antes de renderizar la página, use JS para obtener el ancho del dispositivo y establezca el ancho de visualización de la página = 100rem

Obtenga el ancho y el alto del navegador en index.html del encabezado. Obtenga el ancho y alto del navegador en html

Transfiera las dimensiones obtenidas al componente raíz en el cuerpo

Asigne el estilo div al componente raíz

El efecto es el siguiente:

Encapsule la fórmula resumida en una función y solo necesite importar el archivo cuando la use