Implementar escalado isométrico de página en Vue-cli 3.x (postcss-px2rem)

Los niños del front-end pueden encontrar este problema. El diseñador de la interfaz de usuario nos ha proporcionado un conjunto de dibujos de diseño que debemos adaptarnos a varias pantallas y escalar el tamaño y el tamaño de fuente de cada elemento.

Cuando veo este requisito, primero pienso en la idea anterior, que es consulta de medios, detectar diferentes rangos de anchos de pantalla y escribir diferentes estilos para cambiar el diseño y adaptarlo a PC, iPad y dispositivos móviles. dispositivos.

Suponiendo que las pantallas de más de 999 px pertenecen al lado de la PC, y el lado de la PC se divide en pantallas grandes y extragrandes, debemos responder a la adaptación entre pantallas grandes y pantallas extragrandes. ejemplo:

Por ejemplo: consulta de medios (div.title para las pantallas 999 ~ 1200 tienen 200 px de ancho, 1200 ~ 1440...).

En otras palabras, dentro de un cierto rango, el ancho de div.title es constante. Por supuesto, si desea establecer el porcentaje como constante, ¿la fuente también es una variable? Entonces, ¿cómo se resuelve el problema de intentar responder al tamaño de fuente y al tamaño de elemento en tiempo real?

Aquí podemos utilizar un complemento para resolver fácilmente el problema del escalado isométrico responsivo en tiempo real: el complemento px2rem.

Instalación

Configuración

Configurar con rem.js

La configuración está completa, mira los resultados

Configuración Antes

Después de la configuración

Guau.