web移动端适配（vw+postcss）

在以前的时候，适配移动端我们一般使用rem，通过动态改变根fontsize来使页面缩放。其中很著名的就是淘宝开源的Flexible。当初为了能让页面更好的适配各种不同的终端，通过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值：

从而让页面达么缩放的效果，也变相的实现页面的适配功能。而其主要的思想有三点：

• 根据dpr的值来修改viewport实现1px的线
• 根据dpr的值来修改html的font-size，从而使用rem实现等比缩放
• 使用Hack手段用rem模拟vw特性

如果你想深入了解一下rem适配和Flexible，可以直接百度或者去github看，在这里就不在赘述。

到今天，几乎所有的现代浏览器已经支持vw，我们已经不再需要使用Flexible。可以用vw来更好地实现移动端适配。

下面就来说我们的正题，在这里使用vue.cli3+postcss来实现。

vue-cli3

vue-cli3新建的项目默认已经集成了postcss，所以不用我们单独安装配置，我用的是cli3的图形化界面，在新建项目时，要勾选显示配置文件，这也就会显示postcss的配置文件postcss.config.js。（没勾选时候自己新建了.postcssrc.js文件，结果根本不生效，也不知道是什么鬼，只好写在package.json中，但这种做法感觉不太好。）

postcss插件

需要的postcss插件有postcss-aspect-ratio-mini、postcss-px-to-viewport 、postcss-write-svg 、postcss-cssnext 、postcss-viewport-units、cssnano、cssnano-preset-advanced，可以选择直接执行

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced --S

也可以去图形化界面去安装，顺便看看他们的官方介绍。

下面简单的说一下这几个插件的作用。

.postcss-px-to-viewport

用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。
我们都是使用750px宽度的视觉设计稿，那么100vw = 750px，即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。在实际撸码过程，不需要进行任何的计算，直接在代码中写px。

 

.postcss-aspect-ratio-mini

用来处理元素容器宽高比。

 

.postcss-write-svg

用来处理移动端1px的解决方案。

安装完毕后我们需要配置一下，在postcss.config.js中配置如下内容：

module.exports = {
  "plugins": {
    // "postcss-import": {},
    // "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-write-svg": {
      uft8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, // 设计稿宽度
      viewportHeight: 1334, // 设计稿高度，可以不指定
      unitPrecision: 3, // px to vw无法整除时，保留几位小数
      viewportUnit: 'vw', // 转换成vw单位
      selectorBlackList: ['.ignore', '.hairlines'], // 不转换的类名
      minPixelValue: 1, // 小于1px不转换
      mediaQuery: false, // 允许媒体查询中转换
      exclude: /(\/|\\)(node_modules)(\/|\\)/ //不转换我们引入的第三方包
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false, // 和cssnext同样具有autoprefixer，保留一个
      "postcss-zindex": false
    }
  }
}

 

vw兼容方案

如果您想要兼容所有的低版本浏览器，可以使用Viewport Units Buggyfill

1. 引入js文件

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

2. 在HTML文件中调用viewport-units-buggyfill

window.onload = function () { 
  window.viewportUnitsBuggyfill.init({
     hacks: window.viewportUnitsBuggyfillHacks
  }); 
} 

ps: 使用vw的polyfill解决方案会在用到的vw的地方添加content，会影响到img和伪元素，需要全局添加

`img { content: normal !important; }

 

 如果您想在react中使用，请参考这篇https://segmentfault.com/a/1190000014185590

https://blog.csdn.net/zgpeterliu/article/details/80519634