El terminal móvil de la página de inicio inevitablemente necesita adaptar la altura, el ancho, el tamaño de fuente, etc. Si escribe rem directamente, será muy problemático. El extremo frontal también necesita transferir el estilo de escritura rem de acuerdo con el dibujo de diseño, que será muy problemático y difícil de mantener. Este artículo presentará la conversión automática de la unidad de píxel px de escritura frontal a la unidad rem.
Agregar dependencia postcss-pxtorem
hilo agregar postcss-pxtorem 或 nmp instalar postcss-pxtorem
Agregar dependencia lib-flexible
hilo agregar lib-flexible 或 npm instalar lib-flexible
Agregue la siguiente configuración en package.json
"postcss": {
"plugins": {
"autoprefixer": {
},
"postcss-pxtorem": {
"rootValue": 75,//根据设计图尺寸写，设计图是750，就写75
"selectorBlackList": [//不进行px转换的选择器
"van"//表示van框架不转换px
],
"propList": [
"*"
]
}
}
},
Introduce lib-flexible en main.js
// rem转换
import 'lib-flexible/flexible.js'
De esta manera, la página de inicio escribe px y en realidad se ejecuta usando rem.
Por supuesto, no desea convertir una determinada línea de código, como border: 1px solid #eee. Si escribe y convierte de esta manera, algunos modelos son un poco problemáticos, entonces puede usar directamente 1PX (mayúsculas) Para reemplazar, la página muestra 1PX en lugar de rem, entonces no hay problema.