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，可以选择直接执行

[code]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中配置如下内容：

[code]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文件

[code]<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

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

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

[code]`img { content: normal !important; }

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

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