使用vw单位做移动端适配

最近做一个移动端的项目，需要做到移动端适配。

曾经做过以下几种适配方案，但都不理想：

1. 直接设置根元素字号，再用rem作单位。
2. 使用淘宝flexible.js。
3. 判断设备大小，再设置根元素字号大小，用rem作单位。

以上三种方案原理，是利用rem以根元素(html)字体大小进行计算。随着浏览器对vw单位的支持，使用vm作单位更适合。

本文旨在讲述如何使用vm做适配。

1.直接vm设置根元素字体大小

众所周知视口宽度为100vw，假设设计图为750px，那么1px应该对应多少vw呢？
我们来列个公式：
$\frac {750px} {100vw} = \frac {1px} {x}$
通过计算可得出：x= 0.13333333…
再使用rem作单位，设置 100px为1rem，只要设置根元素的字体大小为13.33vw。

html{
	font-size:13.33vw;
}

但是这个方法存在缺陷，要设置1px时，必须使用px为单位。或者在rem转换时，可能出现问题。

2.利用webpack插件，将px转为vw

在css看用px作单位，在文件编译时，PostCSS插件将px单位转换成对应的vw单位大小。

以vue cli 3为例，先下载PostCSS插件。

• postcss-aspect-ratio-mini
• postcss-px-to-viewport
• postcss-write-svg
• postcss-cssnext
• cssnano
• postcss-viewport-units

使用npm安装

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --save

在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", ".hairlines"], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    }
  }
};

示例中配置的是750px的设计图，如果设计图是其他尺寸，需要修改成其他尺寸。

css示例：

img{
	width:100px;
	height:100px;
}