vue3项目自适应屏幕宽度
- 安装插件:lib-flexible、postcss-px2rem、px2rem-loader
cnpm install lib-flexible --save
cnpm install postcss-px2rem --save
lib-flexible是来作为移动端适配的解决方案的,postcss-px2rem将代码中px自动转化成对应的rem的一个插件。
- 在main.js中引入
import 'lib-flexible'
- 在vue.config.js中引入如下代码
module.exports = {css: {modules: false,extract: true,sourceMap: false,loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({// 设计稿如果是1920的, 则写 1920 / 10 = 192remUnit: 192})]}}}
}
- 如果屏幕宽度大于540px,则需要修改lib-flexible插件中的源代码,因为这个插件原本是给手机端设计的,所以设计的代码最大宽度为540px。
打开*./node_modules/lib-flexible/flexible.js*,找到如下片段源码:
改成
复制如下代码,保存即可
// 如果屏幕比1920宽,则使用屏幕的宽度来计算,否则统一使用1920的宽度计算,会放大出现滚动条
if (width / dpr > 1920) {width = width * dpr;
} else {width = 1920 * dpr;
}
同时把index.js文件中修改视图meta代码为:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">