vue3项目自适应屏幕宽度

1. 安装插件：lib-flexible、postcss-px2rem、px2rem-loader
   
   
cnpm install lib-flexible --save



cnpm install postcss-px2rem --save


lib-flexible是来作为移动端适配的解决方案的，postcss-px2rem将代码中px自动转化成对应的rem的一个插件。

2. 在main.js中引入
   
   
import 'lib-flexible'

3. 在vue.config.js中引入如下代码

module.exports = {
	css: {
	    modules: false,
	    extract: true,
	    sourceMap: false,
	    loaderOptions: {
	      css: {},
	      postcss: {
	        plugins: [
	          require('postcss-px2rem')({
	          // 设计稿如果是1920的， 则写 1920 / 10 = 192
	            remUnit: 192
          })
        ]
      }
    }
  }
}

4. 如果屏幕宽度大于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">

最后需要注意的是：插件只能把css代码中的单位转换为rem，无法把行内样式转换，所以切记把行内样式的px自己换算成rem！