1.手动封装rem.js
- 在public文件夹中创建rem.js文件，写入封装rem的代码
2.在app.vue中引入rem.js，并在vue生命周期内调用
public => rem.js
function resize() {
// 获取html的宽度
let htmlW = document.documentElement.clientWidth;
// 获取body的宽度
let bodyW = document.body.clientWidth;
// 兼容处理
let W = htmlW || bodyW;
// 设置html的font-size大小
// 因为设计图尺寸是750，所以平分，这样*10之后，1rem就等于10px;
// 这样设置 750px尺寸下，1rem=10px 写代码的时候尺寸根据这个算
//屏幕在放大或缩小时 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() {
//当屏幕尺寸发生变化，调用函数重新计算rem
window.onresize = function () {
resize();
};
// 设置初始触发一次
resize();
},
};
</script>
2.postcss-pxtorem和lib-flexible插件搭配实现
1.安装
//npm方法下载 cnpm也一样
npm install lib-flexible postcss-pxtorem --save
//yarn方法下载
yarn add lib-flexible postcss-pxtorem --save
postcss-pxtorem:会将px转换为rem用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，即1rem=html标签的font-size值
lib-flexible:用于设置 rem 基准值
2.在main.js中引入flexible
import 'lib-flexible'
3.配置flexible，在根目录下创建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组件的设计图为375；而目前项目主流设计稿宽度为750
return file.indexOf("vant") !== -1 ? 37.5 : 75;
},
propList: ["*"],
},
},
};
/*flexible的原理是把屏幕分成10份数,比如苹果6,屏幕的宽度是375,html的fontSize为37.5px,2rem就是75px,*/
/*如果切换成苹果5,屏幕的宽度为320,html的fontSize为32px,那么你设置的2rem就是64px*/
// lib-flexible中的 默认缩放比例值 * postcss的rootValue必须等于设计稿的宽度，而lib-flexible默认的缩放比例值就为10，或者自定义的lib-flexible可以自己随便定义，这时候一定要动态修改postcss的rootValue的值
