0:rem单位
rem是同px,em等一样是一个单位。em是相对于父元素的font-size,而rem则是相对于html的font-size。这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。1rem=16px(浏览器html的像素,可以设定这个基准值)。如果元素大小为100px那么设置为rem即为6.25rem。
1:安装插件
插件1:lib-flexible
npm i lib-flexible --save
插件2:
npm i px2rem-loader --save
2:引入lib-flexible
在main.js内引入:
import 'lib-flexible/flexible'
3:vue.config.js内进行配置
chainWebpack: config => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({
remUnit: 75
})
}