vue自适应布局3种方法：
1.传统布局 ：
写个js全局引入页面即可
//方式一
const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';
//方式二
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";
window.addEventListener(
"resize",
function() {
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 7.5 + "px";
},
false
);
//方式一和方式二 效果一样
2.lib-flexible+postcss-px2rem-exclude
淘宝也是采用这用自适应
lib-flexible：
会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem,那么这就有点麻烦了，我他么还要自己计算，不要慌，看下面：
postcss-px2rem-exclude：
postcss-px2rem-exclude 这个插件就是将px单位转换成rem,方便计算，假如有一设计稿为750，那么1rem 就等于75px；此时设计稿是多少px ,直接用多少px 就好了
npm安装npm install lib-flexible --save
npm install postcss-px2rem-exclude --save-dev复制代码
在main.js中引入lib-flexible
import "lib-flexible/flexible.js";
vue-cli3配置方式：在根路径下新增postcss.config.js文件```javascript
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
}
}
}
【vue自适应布局】注意：
如果vant项目中这么使用，会改变vant 样式哦，为防止，有两种解决方式，一要么事改设计稿大小为375，因为vant是参考这个的，这显然不是很友好，
可以在
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules/i//完美解决第三方ui库样式变小问题
"selectorBlackList":["van-"] //排除vant框架相关组件 或者某样式不受rem的影响 }) ] }
}
}
}
