常见的移动端适配方案总结

本文目录：

1.手动方案
2.flexible方案
3.vh、vw方案
4.flex布局
5.px布局
6.媒体查询

1.手动方案

如果你的项目没有使用框架和自动化构建工具，那么如果开发移动端页面的时候，你只需要在页面最开始的时候引入下面的js代码

const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';

在UI稿尺寸为7501334的时代，这句话在设置了font-size后，px和rem的转换比例成了100, 比如UI稿一个长宽分别为120px40px，那么开发者对应的写成1.2rem*0.4rem就可以了。
这种换算已经非常的方便，但是在前端工程化的项目中，我们需要使用更加聪明的方法：

2.flexible方案

lib-flexible是淘宝团队总结出来的移动端弹性布局适配方案
原理是通过js实时的检测屏幕的大小并改变html标签的字体大小，再结合rem的特性来完成页面的自适应。
安装
npm install lib-flexible --save
在main.js中引入

import 'lib-flexible'

接下来把public文件夹中的index.html页面中的meta，name=viewport标签去掉，因为这个标签的作用flexible可以去自动完成。
1）除font-size外，其它大小都根据750标注稿的尺寸，转换成rem单位的值，转换方法为：标注稿尺寸 / 标注稿基准字体大小；
2）标注稿基准字体大小 = 标注稿宽度 / 10，如标注稿宽为750，标注稿基准字体大小为75；标注稿宽为640，标注稿基准字体大小为64；（所以淘宝这个方案是可以在任意设计稿尺寸下使用的）
注意：这里我们假设拿到的标注稿的宽度是750px
标注稿上的每个尺寸都需要手动去除以75px去换算成rem极大的增加了开发的工作量，这里我们借助插件来帮我们自动实现。
安装专门用来自动计算rem的插件

npm install postcss-pxtorem --save

在项目目录下的postcss.config.js添加配置代码

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem':{
        //设计稿对应的rem尺寸，此时是的设计稿对应的是75px
      rootValue:75,
        //所有元素的px自动转化成rem
      propList:['*']
    }
  },
};

大写的PX不会被转换成rem，适合边框使用
由于 viewport单位得到众多浏览器的兼容，上面这种方案现在已经被官方弃用：

lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方案。

下面我们来看看现在最流行的 vh、vw方案。

3.vh、vw方案

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。
上面的 flexible方案就是模仿这种方案，因为早些时候 vw还没有得到很好的兼容。

vw(Viewport's width)： 1vw等于视觉视口的 1%
vh(Viewport's height) : 1vh 为视觉视口高度的 1%
vmin : vw 和 vh 中的较小值
vmax : 选取 vw 和 vh 中的较大值

如果视觉视口为 375px，那么 1vw=3.75px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/3.75=20vw。

这里的比例关系我们也不用自己换算，我们可以使用 PostCSS的 postcss-px-to-viewport 插件帮我们完成这个过程。写代码时，我们只需要根据 UI给的设计图写 px单位即可。
安装

npm install postcss-px-to-viewport --save-dev

引入vue项目，在postcss.config.js引入


module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
       viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false     // 允许在媒体查询中转换`px`
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
    }
  }
}

可能遇到的问题：
@keyframes 和media查询里的px默认是不转化的，设置mediaQuery： true则媒体查询里也会转换px
@keyframes可以暂时手动填写vw单位的转化结果
引用vant，把上面的exclude去掉，这样表示全部内容进行vw转换，会遇到这样的问题：组件变得很小，被压扁了一半，这是因为vant团队是根据375px的设计稿去做的，理想视口宽度为375px。我们自然不能去跟随vant去重新出一版375的设计稿，这样成本太高了，我们可以改变postcss.config.js配置文件

const path = require('path');
module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: designWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }
}

解决思路：如果读取的是vant相关的文件，viewportWidth就设为375，如果是其他的文件，我们就按照我们UI的宽度来设置viewportWidth，即750。

4.flex布局

5.px布局

传统的px布局并不一定会被淘汰，尽管开发成本高，但是能更符合用户的需求，可以考虑使用px 为主，vx 和 vxxx（vw/vh/vmax/vmin）为辅，搭配一些 flex布局

6.媒体查询

在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询。
在跨设备类型如果交互差异太大的情况，考虑分开项目开发。