移动端中的vMin和vMax

2021-01-06  本文已影响0人  _皓月__
  1. vim使用最小那边的比例。也就是说,如果浏览器窗口的高度小于他的宽时,1vmin将等价于1vh;如果浏览器的宽度小于他的高度时,1vmin等价于1vw。

  2. vmax则相反:它使用最大的那一边。因此当viewport的宽大于高时,1vmax等价于1vw;如果浏览器的高大于宽时,1max将等价于1vh。
    vim:使用视窗宽与高中的最小的那个。 vmax:使用视窗宽与高中的最大的那个。

header {
    background: #000;
    min-height: 8vmax;
}

关于vmin和vmax,有几件事需要注意:

  1. 手机Safari的支持中有几个历来都存在的bug(希望在即将到来的IOS 10中能得到解决)。Rodney Rehm有篇文章`《“buggyfill” fixfor the browser》解决了这些问题。

  2. IE9使用vm代替vmin,且不支持vmax。IE10+支持标准单位。

上一篇下一篇

猜你喜欢

热点阅读