css的视口单位vw、vh的使用

什么是视口？

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

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

视口单位

根据CSS3规范，视口单位主要包括以下4个：

1.vw：1vw等于视口宽度的1%。

2.vh：1vh等于视口高度的1%。

3.vmin：选取vw和vh中最小的那个。

4.vmax：选取vw和vh中最大的那个

vh，vw与百分比的区别

1.% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。

2.vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的

3.vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

4.vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

视口单位vw,wh的用处

1.响应式页面

由于vw，vh的特性，他们能够根据窗口大小来自动调节字体大小，这就能很轻松地完成响应式页面的布局

2.可以使用vw，vh来实现在页面中响应垂直居中

1
2
3
4
5

.main { 
width: 50vw; 
height: 50vh; 
margin: 25vh auto; 
}

只要设置margin的上下间距，使之heigit + margin-top +margin-bottom = 100 ，width + margin-left + margin-right = 100 ，就能够响应垂直居中

3.模仿bootstrap的栅栏布局

bootstrap的特点就是它的栅栏布局，而使用vw，vh就能够轻松实现

1
2
3
4
5
6
7
8
9
10
11
12

.row1{ 
    float: left; 
    width:50vw;
}
.row1{
    float: left;
    width:25vw;
}
.row1{
    float: left;
    width:25vw;
}

只要在一行中所有的列加起来等于100vw就实现响应式布局

仅使用vw作为CSS单位

在仅使用 vw 单位作为唯一应用的一种 CSS 单位的这种做法下，我们遵守：

1.对于设计稿的尺寸转换为vw单位，我们使用Sass函数编译

1
2
3
4
5

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

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

1
2
3
4
5
6

.logo{
    display: block;
    margin: 0 auto;
    width: vm(40); // 宽度
    height: vm(40); // 高度
}

vmin、vmax 用处

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。