移动web适配之--vh,vw,vmin,vmax

前言

其实关于vh,vw,vmin,vmax这四个单位，伴随着css3的出现就已经有了，但是当时移动web的浪潮已经来临，并且rem出现的要早，所以很多人忽略这个，但是rem使用适配是要依赖js来进行处理，今天介绍的vh,vw,vmin,vmax是完全基于css的自适应方案，关于rem的适配可以参考笔者之前写的文章。

关于vh,vw,vmin,vmax

先来看下这些单位分别代表什么意思：

  • vw : 1vw 等于视口宽度的1%
  • vh : 1vh 等于视口高度的1%
  • vmin : 选取 vw 和 vh 中最小的那个
  • vmax : 选取 vw 和 vh 中最大的那个

那么什么是视口宽度呢？你一定不会陌生：

1
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

没错，浏览器利用viewport的meta标签中的width来定义浏览器的视口大小，然而width可以使用数字单位来定义，只是我们常用的方法是：将width设置成设备的宽度 即device-width，关于浏览器的视口介绍可以参考这个文章。使用document.documentElement.clientWidth可以获取到浏览器的视口大小，这里要注意不一样的是类似window.innerWidth或者window.screen.width这些拿到的是浏览器的物理宽度，当width!=device-width时是不等效的哦。

vh/vw与%区别在于

单位 基于情况
% 基于父元素
vh/vw 基于视口

So，vh,vw,vmin,vmax都是基于viewport定义的width来定义单位，它是利用视口单位实现，依赖于视口大小而自动缩放，所以不同的设备视口大小不一样自然就达到的适配的效果。

1
2
3
4
5
6
7
.main {
    width: 60vw;
    height: 60vw;
    background-color: red;
    text-align: center;
    line-height: 60vw;
}

和rem相比优势？

关于rem的适配大部分需要2个步骤：

  1. 在页面头部引入js来动态设置页面的html的font-size，一般情况下基于屏幕宽度来计算 即：var rem = docEl.clientWidth / 10;docEl.style.fontSize = rem + 'px';
  2. 在使用css时，使用less或者scss来动态计算dom的实际rem数值
    1
    2
    3
    4
    @function px2rem($px) {
      $rem: 75px;
      @return ($px / $rem) + rem;
    }

由此会有2个问题：

  • 依赖页面头部的js设置，虽说基本上不会阻塞页面渲染，但是放在头部始终要进行一次dom计算，不算优雅。
  • 通常使用宽度来计算html的font-size时，对于那种很宽的手机或者是ipad，会导致适配的不准确(可以参考rem的页面放在ipad上横屏观察一下)。

那么使用vmin基本上可以规避上面的问题：

  • 不依赖js执行。
  • 选取宽高之中较小的值进行适配。

浏览器兼容性？

那么vh,vw,vmin,vmax这么方便，为什么还是没有流行起来呢？让我们来看看浏览器的兼容性：

Android4.4之前不支持是硬伤！

豫ICP备19009686号