视口单位（ Viewport units )初探

视口单位（ Viewport units )初探

起因

最近在写的一个仿网易云的webapp中有一个nav组件。其中nav-item需要宽度自适应屏幕的1/4.其中nav-icon需设置圆形。问题在于：宽度不确定，需要设置高度与宽度相同，且icon-font的font-size需随nav-item的宽度变化。首先想到的是css3的calc() 或者设置高为0，让padding撑起高的方案来实现。但是并不能解决font-size需随nav-item的宽度变化。后面了解到了视口单位（ Viewport units )

Viewport 视口

在业界，极为推崇的一种理论是 Peter-Paul Koch (江湖人称“PPK大神”)提出的关于视口的解释——在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端较为复杂，它涉及到三个视口：分别是 Layout Viewport（布局视口）、 Visual Viewport（视觉视口）、Ideal Viewport。而视口单位中的“视口”，在桌面端，毫无疑问指的就是浏览器的可视区域；但是在移动端，它指的则是三个 Viewport 中的 Layout Viewport 。

Viewport units 视口单位

视口单位主要包括以下4个：

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

使用vw设置宽高相同，已经iconfont的font-size自适应。就有了下面的nav组件代码。

<div class="nav">
    <div class="nav-item">
    	<i class="nav-icon iconfont icon-icon--"></i>
    	<span class="nav-text">私人FM</span>
    </div>
    <div class="nav-item">
    	<i class="nav-icon iconfont icon-calendar_icon"></i>
    	<span class="nav-text">每日推荐</span>
    </div>
    <div class="nav-item">
    	<i class="nav-icon iconfont icon-icon-"></i>
    	<span class="nav-text">歌单</span>
    </div>
    <div class="nav-item">
    	<i class="nav-icon iconfont icon-paixingbang"></i>
    	<span class="nav-text">排行榜</span>
    </div>
</div>
复制代码

.nav {
        width: 100%;
        height: 12vh;
        display: flex;
        .nav-item {
            flex: 1;
            height: 100%;
            .nav-icon {
                margin: 1vh 4vw;
                width: 17vw;
                height: 17vw;
                display: inline-block;
                border-radius: 50%;
                background: @color-theme;
                text-align: center;
                vertical-align: middle;
                color: @color-text-lm;
                font-size: 9vw;
            }
            .nav-text {
                display: inline-block;
                width: 100%;
                font-size: @font-size-small;
                color: @color-text-g;
                text-align: center;
            }    
            
        }
    }
复制代码

转载于:https://juejin.im/post/5c85f2ade51d4557a74b91e6