什么是视口?
在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及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来实现在页面中响应垂直居中
.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就能够轻松实现
.row1{ float: left; width:50vw; } .row1{ float: left; width:25vw; } .row1{ float: left; width:25vw; }
只要在一行中所有的列加起来等于100vw就实现响应式布局
仅使用vw作为CSS单位
在仅使用 vw 单位作为唯一应用的一种 CSS 单位的这种做法下,我们遵守:
1.对于设计稿的尺寸转换为vw单位,我们使用Sass函数编译
//iPhone 6尺寸作为设计稿基准
$vm_base: 375;
@function vw($px) {
@return ($px / 375) * 100vw;
}
2.无论是文本还是布局高宽、间距等都使用 vw 作为 CSS 单位
.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。使得文字大小在横竖屏下保持一致。