Solución adaptable móvil px2rem
Al desarrollar una aplicación web, generalmente solo obtenemos un tamaño de diseño de proyecto del diseñador; por ejemplo, está basado en el iPhone 6, por lo que la interfaz debe hacer que este diseño funcione en diferentes modelos de dispositivos. General , este artículo presenta cómo utilizar el complemento hotcss.js.
Para utilizar el complemento px2rem en vue-loader, instale primero px2rem-loader:
Dependiendo del modelo de teléfono utilizado en el diseño (por ejemplo, iPhone 6 o iPhone X), el ancho es 640px o 750px, así que primero obtenga el elemento raíz móvil de las herramientas de depuración de Chrome. html> elemento raíz y luego configúrelo en el valor del parámetro remUnit al configurar vue-loader:
De esta manera puede escribir el valor absoluto del píxel CSS en px y px2rem combinará diferentes puntos finales del diseño, convierte automáticamente las dimensiones a las unidades rem correspondientes. px2rem convertirá automáticamente las dimensiones a las unidades rem correspondientes, que combinadas con los diferentes tamaños de fuente del elemento raíz html generados por diferentes terminales producirán un conjunto de diseños que son totalmente compatibles en diferentes dispositivos.
Extraí la estructura de directorios y los archivos de configuración de Webpack de un proyecto anterior para crear un andamio de aplicación web simple para la solución adaptable descrita en este artículo.
Dirección del proyecto Github: plantilla de construcción de proyecto de aplicación web basada en Vue