vue3项目自适应屏幕宽度

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

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

  1. 在main.js中引入
    import 'lib-flexible'
  2. 在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
          })
        ]
      }
    }
  }
}
  1. 如果屏幕宽度大于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!

Logo

前往低代码交流专区

更多推荐