1.手動封裝rem.js
- 在public文件夾中創(chuàng)建rem.js文件，寫入封裝rem的代碼
2.在app.vue中引入rem.js睛藻，并在vue生命周期內(nèi)調(diào)用
public => rem.js
function resize() {
// 獲取html的寬度
let htmlW = document.documentElement.clientWidth;
// 獲取body的寬度
let bodyW = document.body.clientWidth;
// 兼容處理
let W = htmlW || bodyW;
// 設(shè)置html的font-size大小
// 因為設(shè)計圖尺寸是750，所以平分坑质，這樣*10之后，1rem就等于10px;
// 這樣設(shè)置 750px尺寸下扒披，1rem=10px 寫代碼的時候尺寸根據(jù)這個算
//屏幕在放大或縮小時 1rem的值也會等比例放大或縮小
document.documentElement.style.fontSize = (W / 750) * 10 + "px";
}
export { resize };
app.vue
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
import { resize } from "../public/rem";
export default {
created() {
//當屏幕尺寸發(fā)生變化慎框，調(diào)用函數(shù)重新計算rem
window.onresize = function () {
resize();
};
// 設(shè)置初始觸發(fā)一次
resize();
},
};
</script>
2.postcss-pxtorem和lib-flexible插件搭配實現(xiàn)
1.安裝
//npm方法下載 cnpm也一樣
npm install lib-flexible postcss-pxtorem --save
//yarn方法下載
yarn add lib-flexible postcss-pxtorem --save
postcss-pxtorem:會將px轉(zhuǎn)換為rem用于適配不同寬度的屏幕膜毁，根據(jù)標簽的font-size值來計算出結(jié)果，即1rem=html標簽的font-size值
lib-flexible:用于設(shè)置 rem 基準值
2.在main.js中引入flexible
import 'lib-flexible'
3.配置flexible张足，在根目錄下創(chuàng)建postcss.config.js文件
// postcss.config.js
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
"postcss-pxtorem": {
rootValue({ file }) {
//如果是vant文件則1rem=37.5;如果非vant文件則為1rem=75;
//因為vant組件的設(shè)計圖為375触创；而目前項目主流設(shè)計稿寬度為750
return file.indexOf("vant") !== -1 ? 37.5 : 75;
},
propList: ["*"],
},
},
};
/*flexible的原理是把屏幕分成10份數(shù),比如蘋果6,屏幕的寬度是375,html的fontSize為37.5px,2rem就是75px,*/
/*如果切換成蘋果5,屏幕的寬度為320,html的fontSize為32px,那么你設(shè)置的2rem就是64px*/
// lib-flexible中的 默認縮放比例值 * postcss的rootValue必須等于設(shè)計稿的寬度，而lib-flexible默認的縮放比例值就為10为牍，或者自定義的lib-flexible可以自己隨便定義哼绑，這時候一定要動態(tài)修改postcss的rootValue的值
