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

2,492 阅读3分钟

很久没有做过移动端的项目了,关于移动端的自适应,最早之前用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,
      }
  }
}

配置项有很多,还能配置不转换之类的:

github.com/evrone/post…

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

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

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

1624524227(1).jpg

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