参考文章: https://blog.csdn.net/weixin_41257563/article/details/97266234
项目框架: 项目是基于vue-cli3生成的工程化项目
vue create projectName
依赖: 1.自适应方案核心： 阿里可伸缩布局方案 lib-flexible 2.px转rem：px2rem，它有webpack的loader: px2rem-loader
一.安装
yarn add lib-flexible -S
yarn add px2rem-loader -D
二.lib-flexible使用 在入口文件 main.js 里引入 lib-flexible
// main.js
import 'lib-flexible'
通过以上步骤引入lib-flexible之后, 项目中就可以使用rem了, 实现了可伸缩布局。
但是在实际开发中，我们通过设计稿得到的单位是px，所以要将px转为rem放入样式中。但如果都需要手动转的话，就很麻烦，所以需要一个工具替我们完成这项工作，这个时候就需要配置px2rem了。
三.px2rem-loader使用 在vue.config.js中配置webpack依赖, px2rem-loader 的 remUnit通常设置成设计稿的1/10即可, 假设设计稿是1280px, 则可以设置remUnit为128, 代表1rem = 多少像素; remPrecision 参数表示换算的rem保留几位小数点
// vue.config.js
chainWebpack: config => {
config.module
.rule('css')
.test(/.css$/)
.oneOf('vue')
.use('px2rem-loader')
.loader('px2rem-loader')
.options({
remUnit: 128
remPrecision: 8
})
.end()
}
但是有一个问题，我明明设置的宽度是按1280px来的，为什么计算出来1rem=54px? 
这是因为lib-flexible依赖的文件中当宽度540px时, 把宽度定死为540px, 我们需要把它改成自动获取宽度即可.
// node_modules/lib-flexible/flexible.js 找到对应文件
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
// width = 540 * dpr;// 获取屏幕宽度, 当屏幕大于540时,这里写死了540,只需要改成获取当屏幕宽度即可
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
重启项目可效果: 
配置好后, 不管是移动端还是pc端还是大屏开发都可以轻松应对~ 完结撒花🎉
说个题外话, 根据上面配置好了之后, 在页面中可以直接按照设计图来写样式, 不需要进行任何换算, 但不知道会不会也有同学和我一样会想它到底是如何计算的呢? 反正我是想了很久, 下面是我的理解:
项目中设置box的宽度为1280px, 且remUnit为128 .box{ width:1280px }在浏览器中, px2rem将px自动转成rem, 计算方法如下: .box的宽度转成rem= 1280px/128= 10rem而html根元素的字体大小由lib-flexible控制, 如果此时为 font-size:100px 那么box的实际宽度=100px*10rem=1000px那么lib-flexible是又是如何根据屏幕宽度设置根元素的字体大小呢?
上图可以看出根元素的字体=当前屏幕宽度/10 =1rem 看到这里, 相信大家的疑惑应该解开了 不足的地方望大家指正~
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_Sarah/article/details/112689138
![julia常用矩阵函数_[向量化编程函数] arrayfun的典型应用(part1)](/thumb/3131/1611338367-4648.jpg)