1 、創(chuàng)建rem.js文件
// 基準大小
const baseSize = 32
// 設置 rem 函數
function setRem () {
// 當前頁面寬度相對于 750 寬的縮放比例员寇，可根據自己需要修改寇甸。
const scale = document.documentElement.clientWidth / 750
// 設置頁面根節(jié)點字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
setRem()
}
2极阅、在main.js中引入rem.js
import './utils/rem'
引入文件后，查看頁面的html節(jié)點耻警，是否有被自動添加 font-size隔嫡。
注意：完成到這一步甸怕，也就是實現(xiàn)了rem布局，實際開發(fā)的時候腮恩，還是需要我們去計算對應的rem值去開發(fā)梢杭。
3 、配置 postcss-pxtorem 自動轉換px為rem
1秸滴、安裝 postcss-pxtorem
$ npm install postcss-pxtorem -D
2武契、在根目錄下創(chuàng)建 vue.config.js配置postcss-pxtorem
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue : 32, // 換算的基數
selectorBlackList : ['weui','mu'], // 忽略轉換正則匹配項
propList : ['*'],
}),
]
}
}
},
}
按照上述配置項目后，即可在開發(fā)中直接使用 px 單位開發(fā)荡含。
例如設計給出的設計圖是 750 * 1136咒唆，那么可以直接在頁面中寫
body {
width: 750px;
height: 1136px;
}
將被轉換為
body {
widht: 23.4375rem;
height: 35.5rem;
}
