移动端的适配方案

这是一个老生常态的问题，关于移动端适配，实际上有很多种方案，比如：

小程序端的rpx。
通过动态的调整根元素的字体大小，来使用rem做计量单位。
以及视口单位。

今天主要说下：视口单位如何做适配

这是从mdn文档截图，对视图单位的描述：

项目背景和实现思路

我们目前在开发一个移动端的项目，ui给我们按照iphone6（750*1334）的尺寸来设计,那我们如何去适配其他的尺寸呢？其实我的理解就是在iphone6的基础上，进行等比兑换，拿ihone5来举例，它的尺寸是：640*1136，我们在开发的过程中，怎么能保证页面由750*1334的尺寸转变成640*1136的尺寸，而页面布局还不乱呢？我的思路就是不用px做布局，直接使用vw来做，因为手机尺寸怎么变化，我们都是基于视口单位（vw）来进行的换算，比如我用10vw在iphone6的尺寸它就是75px,在iPhone5的尺寸它就是70px，这样页面布局使用的就是相对单位，而不是绝对单位。

具体在项目中怎么做呢？

正常按照设计图（iphone6）的尺寸开发，使用px单位。(这解释下，为啥不直接使用vw，因为转化太麻烦了，比如：你在蓝湖，直接复制设计图的css，然后自己再去一个个的转换单位，太麻烦，就算使用scss的函数，还是一样麻烦，所以直接一个loader去转化，懒得自己改)。
编写loader，对css的px单位进行等比转化vw。

loader应该怎么编写

拿到css源码（sourceCssString）。
通过正则进行匹配拿到px尺寸单位，并放到一个数组中。
遍历数组，通过px进行切割获取val，然后val/750*100，得到vw单位大小。
替换sourceCssString。
返回sourceCssString。

项目根目录编写pxToVw.js

pxToVw.js 复制代码

module.exports = function (source) {
    if (source) {
        const defaultOptions = {
            unitToConvert: 'px',
            viewportWidth: 750,
            unitPrecision: 4,
            viewportUnit: 'vw',
        }
        const options = { ...defaultOptions, ...this.getOptions() }
        const reg = /\d{0,9}px/g
        const values = (source.match(reg))
        if (values) {
            values.forEach(item => {
                const [val] = item.split(options.unitToConvert)
                const transformValue = (val / options.viewportWidth * 100).toFixed(options.unitPrecision)
                source = source.replace(item, `${transformValue}${options.viewportUnit}`)
            })
        }
        return source
    }
}

然后在webpack.common.js引用

webpack.common.js 复制代码

    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            env.mode === "development" ? "style-loader" : loader,
             {
               loader: path.resolve(__dirname, "pxToVw.js"),
             },
            "css-loader",
            'postcss-loader',
            "sass-loader",
          ],
        },
        {
          test: /\.css$/i,
          use: [
            env.mode === "development" ? "style-loader" : loader,
             {
               loader: path.resolve(__dirname, "pxToVw.js"),
             },
            "css-loader",
            'postcss-loader',
            "sass-loader",
          ],
        },
      ],
    },

至此视口单位的适配，就结束了。

假如说：我想用iphone5(640*1136)的基准来做适配怎么办?很简单，传参，下面是示例代码：

webpack.common.js 复制代码

{ loader: path.resolve(__dirname, "pxToVw.js"),
  options:{
    viewportWidth: 640,
  }
},

在pxToVw.js这个loader中，已经使用this.getOptions()获取传递的参数。

总结

其实我是比较推荐使用视口单位来做适配的，至于rem，不太推荐，因为这个方案，本身当时就是一个过渡方案（当时vw的兼容性还很差），不过现在已经很好了，完全可以vw一把梭。