介绍
在日常开发时，避免不了屏幕适配的问题，而vue开发的页面都是通过px设置它的尺寸，如果换了一个不同尺寸的屏幕就会出现页面排版错乱，显示不完整等情况。下面介绍一种解决办法，通过插件将px装换为rem单位从而适应不同尺寸的屏幕。
插件介绍
lib-flexible插件作用是根据rem调整页面宽高，自适应屏幕尺寸
px2rem-loader插件作用是将px单位转换为rem单位，lib-flexible插件才能根据rem调整网页宽高尺寸。
第一步：安装插件
# 安装lib-flexible插件npm i lib-flexible# 安装px2rem-loader插件 npm i px2rem-loader
第二步：全局配置插件
//在main.js文件中引用lib-flexible插件// 引用lib-flexible插件import "lib-flexible"
// 在vue.config.js中配置px2rem-loadermodule.exports = {configureWebpack: {// webpack 配置output: {filename: ,chunkFilename: `,},},// 配置px2rem-loaderchainWebpack: config => {config.module.rule("css").test(/\.css$/).oneOf("vue").resourceQuery(/\?vue/).use("px2rem").loader("px2rem-loader").options({// 设置px转化为rem比例，设计稿大小为1920，比例 1920/ 10remUnit: 192});},}
第三步：配置flexible.js
//根据路径找到该文件：node_modules/lib-flexible/flexible.jsfunction refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {// 将width = 540 * dpr; 540改为widthwidth = width * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}
最后重启服务即可（仅供参考，有不对的地方，还望理解。。。。）
如果觉得《vue开发页面自适应屏幕尺寸（仅供参考）》对你有帮助，请点赞、收藏，并留下你的观点哦！
