解决Vue项目的移动端适配问题

解决Vue项目的移动端适配问题

移动端适配有很多种方案，如flex布局，百分比布局，响应式布局，vw布局；我个人比较喜欢的是rem和vw，当然最喜欢的是rem适配方案，因为它的兼容性更佳！

参考：https://blog.csdn.net/weixin_41967475/article/details/109339844

一、基础知识

在进入正文之前，先简单了解一下什么是手机适配？什么是rem?什么是vw？

1.什么是手机适配？

答：设计狮制作效果图，程序猿把效果图应用到不同的手机，对不同的屏幕进行界面调整的过程，确保界面不变形，呈现效果图的位置、尺寸、比例。

2.什么是rem?

答：rem是CSS3新增的一个相对单位，它相对根节点< html >字体的大小。rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。

3.什么是vw?

答：vw是viewpoint width的简称，即视窗宽度，1vw相当于视窗宽度的1%,100vw相当于视窗宽度的100%。

二、rem适配方案

1.先用vue-cli 手动快速构建一个前端项目

参考： vue-cli 3.0手动创建项目

2.在项目中index.html的头部标签加入下面这句话，让不同设备的浏览器的视口取最佳CSS像素

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

3.分别安装 postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url一系列插件

cnpm install postcss@8.2.6 --save

cnpm install postcss-import@14.0.0 --save

cnpm install postcss-loader@5.0.0 --save

cnpm install postcss-pxtorem@5.1.1 --save

cnpm install postcss-url@10.1.1 --save

注：最好指定版本号安装

4.在项目根目录下添加 .postcssrc.js 文件

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 32, //根目录的字体大小设为32px
      propList: ['*'], //proplist:是那些属性需要转换成rem，全部
      minPixelValue: 2 //最小转换单位.2px
    }
  }
};

5.动态设置根字体大小

在项目中index.html的头部添加下面这段js代码：

<script>
    (function () {
      function autoRootFontSize() {
        document.documentElement.style.fontSize = Math.min(screen.width, document.documentElement
          .getBoundingClientRect().width) / 750 * 32 + 'px';
        // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；
        // 除以750，乘以32；意思就是相对于750大小的32px;
        // 即如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！
      }
      window.addEventListener('resize', autoRootFontSize);
      autoRootFontSize();
    })();
  </script>

注：因为设计狮制作的效果图常为750px，为了方便直接读取UI标好的像素大小，根目录的字体大小就设置为32px;

三、vw适配方案

vw是相对屏幕的百分比，所以我们不用再去动态的改变根字体大小了，只需要把设计狮制作的效果图的px大小转换成对应的vw值就完了。

1vw表示1%的屏幕宽度， 即屏幕宽度被分为100份vw
如：750px 设计稿 = 100vw ，1vw = 7.5px

1.先用vue-cli 手动快速构建一个前端项目

参考： vue-cli 3.0手动创建项目

2.分别安装 postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url一系列插件

cnpm i postcss --save

cnpm i postcss-pxtorem --save

cnpm i postcss-loader --save

cnpm i postcss-import --save

cnpm i postcss-url --save

3.在项目根目录下添加 .postcssrc.js 文件

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,//设计稿大小是750px
      unitPrecision: 3,//vw值保留的小数点个数
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false
    },
    "postcss-viewport-units": {},
  }
}

布局时各元素的尺寸值都是根据设计稿标注的尺寸计算出来，由于html的font-size是动态调整的，所以能够做到不同分辨率下页面布局呈现等比变化，即适配的本质就是根据手机屏幕尺寸基于百分比进行缩放。