美文网首页
移动端中的vMin和vMax

移动端中的vMin和vMax

作者: _皓月__ | 来源:发表于2021-01-06 15:34 被阅读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+支持标准单位。

    相关文章

      网友评论

          本文标题:移动端中的vMin和vMax

          本文链接:https://www.haomeiwen.com/subject/ownnoktx.html