postcss-px-to-viewport之vw、vh、rem

很久没有做过移动端的项目了，关于移动端的自适应，最早之前用rem，我个人觉得效果很不错。忘记是哪个大神的文章提到过，lib-flexible有一些问题，建议使用viewport，今天使用一下viewport。

先知道一下viewport的四个单位，vw、vh、vmax、vmin：
vw:1vw 等于视口宽度的1%
vh:1vh 等于视口高度的1%
vmin: 选取 vw 和 vh 中最小的那个
vmax:选取 vw 和 vh 中最大的那个

这边需要注意的是，vw是视口宽度，是连滚动条都算在内的：

<div style="width: 100vw;height: 20vh;background: #9dff00"></div>
<div style="width: 100%;height: 20vh;background: #005eff"></div>
<div style="width: 100vw;height: 80vh;background: #a6a9af"></div>

我把视口宽度拉到1000，因为出现滚动条，100vw的宽度是1000px，宽度是100%的则是983px。所以，用vw、vh的时候，注意要宽度百分百的时候，设置100%，否则底部会出现滚动条。当然，如果是移动端就没关系，移动端的滚动条是滑动的时候才出现，所以移动端的视口宽度就是百分百。

vmin和vmax的例子：

<div style="width: 100vw;height: 20vmin;background: #9dff00"></div>
<div style="width: 100vw;height: 20vmax;background: #005eff"></div>

同样是把视口宽度拉到500，高度是968，20vmin的高度是100px，20vmax的高度是193.594px。取的是vw和vh最大最小计算。

先使用rem，之前用的是淘宝的flexible.js，会帮你动态的根据屏幕大小计算html的font-size。我去看了之前的项目和淘宝，根据750的设计稿，使用flexible.js的在屏幕556px之后html的font-size最大是54px，移动端的时候540之后html的font-size最大也是54px。而淘宝不管是PC还是移动端，屏幕480px之后html的font-size最大也是64px。

既然知道rem的原理，只需要动态设置html的font-size，计算也很简单，比如按照750设计稿，flexible的1rem是75px，如果配合vw，100vw是750px，那么1px就是0.1333333vw，75px就是10vw，所以只需要设置：

html{
  font-size: 10vw;
}

再用媒体查询设置一下最大值：

@media (min-width: 540px) {
  html {
    font-size: 54px;
  }
}

就达到了flexible.js的效果，就不需要使用flexible.js了。我对比了用flexible.js的项目，和这样使用，html的font-size是一模一样。只不过这样使用还需要单位换算插件。也可以直接用蓝湖直接转换，或者设置成1rem为100px，那font-size就要设置成13.33333vw。

有点跑偏了，主要想分享postcss-px-to-viewport的使用。先安装：
npm install postcss-px-to-viewport --save-dev
新建postcss.config.js文件，然后配置：

module.exports = {
  plugins: {
      'postcss-px-to-viewport': {
        viewportWidth: 750,
        minPixelValue: 1,
        unitPrecision: 5,
      }
  }
}

配置项有很多，还能配置不转换之类的：

https://github.com/evrone/postcss-px-to-viewport/blob/HEAD/README_CN.md

没怎么用过，不过刚用就发现行内样式不起作用，还以为引入错了。然后看了看issues，发现行内样式需求还是蛮多的，比如富文本返回的，动态计算样式之类的，不知道什么时候会解决这个问题。

我不知道用rem会有哪些问题，要是我，我还是会使用rem，可能也是因为主观习惯问题，说不定以后有项目用的是viewport，接手之后习惯了就变的真香。

最后分享个今天发现的浏览器问题，拖拉的时候居然没办法变成540，可以539也可以541，就是拖不到540，不知道是不是我电脑或者浏览器问题：

欢迎关注公众号 coding个人笔记