CSS單位rem
rem
就是相對于根元素<html>
的font-size
來做計算荠商。而我們的方案中使用rem
單位寂恬,是能輕易的根據(jù)<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單位
初肉,在瀏覽器運行會自動轉(zhuǎn)換為rem單位