CSS单位rem
rem就是相对于根元素<html>的font-size来做计算。而我们的方案中使用rem单位，是能轻易的根据<html>的font-size计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。
在vue中使用
1.安装lib-flexible插件
npm i --save-dev lib-flexible
2.在main.js里引入
import 'lib-flexible'
4.安装postcss-px2rem插件
npm i --save-dev postcss-px2rem
3.在vue.config.js中配置
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5
})
]
}
}
}
}
4.在vue文件的样式里写px单位，在浏览器运行会自动转换为rem单位
网友评论