Le terminal mobile de la page frontale doit inévitablement adapter la hauteur, la largeur, la taille de la police, etc. Cet article présentera la conversion automatique de l'unité de pixels px d'écriture frontale en unité rem.
Ajouter une dépendance postcss-pxtorem
yarn add postcss-pxtorem 或 nmp install postcss-pxtorem
Ajouter une dépendance lib-flexible
yarn add lib-flexible 或 npm install lib-flexible
Ajoutez la configuration suivante dans package.json
"postcss": {
"plugins": {
"autoprefixer": {
},
"postcss-pxtorem": {
"rootValue": 75,//根据设计图尺寸写，设计图是750，就写75
"selectorBlackList": [//不进行px转换的选择器
"van"//表示van框架不转换px
],
"propList": [
"*"
]
}
}
},
Introduisez lib-flexible dans main.js
// rem转换
import 'lib-flexible/flexible.js'
De cette façon, la page frontale écrit px et s'exécute en fait avec rem.
Bien sûr, vous ne voulez pas convertir une certaine ligne de code, telle que border: 1px solid #eee. Si vous écrivez et convertissez de cette façon, certains modèles sont un peu problématiques, vous pouvez alors utiliser directement 1PX (majuscules) Pour remplacer, alors la page affiche 1PX au lieu de rem, alors il n'y a pas de problème.