介绍
在日常开发时,避免不了屏幕适配的问题,而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开发页面自适应屏幕尺寸(仅供参考)》对你有帮助,请点赞、收藏,并留下你的观点哦!