vh,vw单位

小咪咪 2021-10-19 06:34 422阅读 0赞

# vh,vw单位你知道多少？ #

--------------------

响应式布局的单位我们第一时间会想到通过`rem`单位来实现适配，但是它还需要内嵌一段脚本去动态计算跟元素大小。  
比如：

(function (doc, win) {
      let docEl = doc.documentElement
      let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
      let recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        docEl.style.fontSize = 14 * (clientWidth / 320) + 'px'
      }
      if (!doc.addEventListener) return
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window)

那有没有一个单位不需要JS和CSS耦合在一起的单位？答案是有的，就是`vw／vh`。

*  vw = view width
 *  vh = view height

这两个单位是CSS3引入的，以上称为**视口单位**允许我们更接近浏览器窗口定义大小。

视口单位(Viewport units)

Q：什么是视口？A：Peter-Paul Koch（”PPK大神”）提出视口的解释是：在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。  
![aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxNy85LzcvZDQyOTMzZjMzMTQ4MzI4YzI4Njc1ZWJkMzc4ZjU4MjM_aW1hZ2VWaWV3Mi8wL3cvMTI4MC9oLzk2MC9mb3JtYXQvd2VicC9pZ25vcmUtZXJyb3IvMQ][]

vh/vw与%区别

![aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxNy85LzcvMTllOWQ4Y2JmOWQ3N2Q5NTlhODc0MTMyN2RhZGQzZGU_aW1hZ2VWaWV3Mi8wL3cvMTI4MC9oLzk2MC9mb3JtYXQvd2VicC9pZ25vcmUtZXJyb3IvMQ][]

<table> 
 <thead> 
  <tr> 
   <th>单位</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>vw</td> 
   <td>1vw = 视口宽度的1%</td> 
  </tr> 
  <tr> 
   <td>vh</td> 
   <td>1vh = 视口高度的1%</td> 
  </tr> 
  <tr> 
   <td>vmin</td> 
   <td>选取vw和vh中最小的那个</td> 
  </tr> 
  <tr> 
   <td>vmax</td> 
   <td>选取vw和vh中最大的那个</td> 
  </tr> 
 </tbody> 
</table>

> 比如：浏览器视口尺寸为370px,那么 1vw = 370px \* 1% = 6.5px(浏览器会四舍五入向下取7)

vh/vw与%区别在于，

<table> 
 <thead> 
  <tr> 
   <th>单位</th> 
   <th>依赖于</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>%</td> 
   <td>元素的祖先元素</td> 
  </tr> 
  <tr> 
   <td>vh/vw</td> 
   <td>视口的尺寸</td> 
  </tr> 
 </tbody> 
</table>

兼容性问题

![aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxNy85LzcvY2EyZDM3YWI1YTYxMmUyNTRjODA5OTY5N2RjMDUzYTk_aW1hZ2VWaWV3Mi8wL3cvMTI4MC9oLzk2MC9mb3JtYXQvd2VicC9pZ25vcmUtZXJyb3IvMQ][]

![aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxNy85LzcvNjg2ZDg3Y2EzNDViNDdiZmNjOGMxM2UwYzE2OGNkNDI_aW1hZ2VWaWV3Mi8wL3cvMTI4MC9oLzk2MC9mb3JtYXQvd2VicC9pZ25vcmUtZXJyb3IvMQ][]

**在移动端 iOS 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持。**

运用

仅使用vw作为CSS单位

使用 vw 单位作为唯一应用的一种 CSS 单位的这种做法下

1.根据设计稿的尺寸转换为vw单位(SASS函数编译)

//iPhone 6尺寸作为设计稿基准
    $vm_base: 375; 
    @function vm($px) {
        @return ($px / 375) * 100vw;
    }

2.无论是文本还是布局高宽、间距等都使用 vw

< div class="mod_nav">
                < nav class="mod_nav_list" v-for="n in 5">
                    < a href="#" class="mod_nav_list_item">
                        < span class="mod_nav_list_item_logo">
                    < img src="http://jdc.jd.com/img/80">
                        < /span>
                        < p class="mod_nav_list_item_name">导航入口< /p>
                    < /a>
                < /nav>
    < /div>
    .mod_nav {
        background: #fff;
        &_list {
            display: flex;
            padding: vm(15) vm(10) vm(10);
            &_item {
                flex: 1;
                text-align: center;
                font-size: vm(10);
                &_logo {
                    display: block;
                    margin: 0 auto;
                    width: vm(40);
                    height: vm(40);
                    img {
                        display: block;
                        margin: 0 auto;
                        max-width: 100%;
                    }
                }
                &_name {
                    margin-top: vm(2);
                }
            }
        }
    }

会得到这样的效果：![1][]

最优做法——搭配vw和rem

使用vm作为css单位代码量确实减少很多，但是你会发现**它是利用视口单位实现，依赖于视口大小而自动缩放，**失去了最大最小宽度的限制。

所以，我们需要结合rem单位来实现布局，而rem正好可以动态改变根元素大小，做法是：

1.  给根元素大小设置vw–动态改变大小。
2.  限制根元素font-size的最大最小值，配合bosy加上最大最小宽度。

// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
    $vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
    @function rem($px) {
         @return ($px / $vm_fontsize ) * 1rem;
    }
    // 根元素大小使用 vw 单位
    $vm_design: 750;
    html {
        font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
        // 同时，通过Media Queries 限制根元素最大最小值
        @media screen and (max-width: 320px) {
            font-size: 64px;
        }
        @media screen and (min-width: 540px) {
            font-size: 108px;
        }
    }
    // body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
    body {
        max-width: 540px;
        min-width: 320px;
    }

[aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxNy85LzcvZDQyOTMzZjMzMTQ4MzI4YzI4Njc1ZWJkMzc4ZjU4MjM_aW1hZ2VWaWV3Mi8wL3cvMTI4MC9oLzk2MC9mb3JtYXQvd2VicC9pZ25vcmUtZXJyb3IvMQ]: /images/20211018/60a425ab988a4525a2a40f7d5ef74995.png
[aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxNy85LzcvMTllOWQ4Y2JmOWQ3N2Q5NTlhODc0MTMyN2RhZGQzZGU_aW1hZ2VWaWV3Mi8wL3cvMTI4MC9oLzk2MC9mb3JtYXQvd2VicC9pZ25vcmUtZXJyb3IvMQ]: /images/20211018/e506d71dc0c34a038594fc75f509fcb0.png
[aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxNy85LzcvY2EyZDM3YWI1YTYxMmUyNTRjODA5OTY5N2RjMDUzYTk_aW1hZ2VWaWV3Mi8wL3cvMTI4MC9oLzk2MC9mb3JtYXQvd2VicC9pZ25vcmUtZXJyb3IvMQ]: /images/20211018/079be0f36f2d4e16b40ec9c945d8b159.png
[aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxNy85LzcvNjg2ZDg3Y2EzNDViNDdiZmNjOGMxM2UwYzE2OGNkNDI_aW1hZ2VWaWV3Mi8wL3cvMTI4MC9oLzk2MC9mb3JtYXQvd2VicC9pZ25vcmUtZXJyb3IvMQ]: /images/20211018/8fababab6d694f87a2821baee47fa988.png
[1]: /images/20211018/cb0368dc4de248288b7ffc54256cdddb.png