安装lib-flexible
npm install lib-flexible --save
在项目的入口main.js文件中引入lib-flexible
import 'lib-flexible/flexible'
lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,并自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size
例如宽度为750px的设计稿,1rem就是75px,设计稿中某个元素宽度为150px,那css中就应该写2rem
为了避免每次都根据设计稿量出来的尺寸去计算成rem,可以使用 postcss(使用插件转换css的工具)插件postcss-px2rem-exclude自动将css中的px转成rem
安装postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
在项目根目录postcss.config.js中配置
module.exports = {
"plugins": {
"autoprefixer": {}, //自动补齐css3前缀
"postcss-px2rem-exclude": {
remUnit: 75, //代表 1rem = 75px,方便用于宽度为750的设计稿
exclude: /node_modules/i
}
}
}
现在在css文件中就可以直接写px为单位,打开控制台可以看到px被转成了rem