移动端 响应式web设计 视口自适应单位(vw vh)

一、前言

响应式web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。

二、什么是视口

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

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth(窗口内部宽度)/window.innerHeight(窗口内部高度)大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

window.outerWidth(窗口的整个宽度)

window.outerHeight(窗口的整个高度)

三、“vh” & “vw”

如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该怎么办？

vw和vh是视口（viewport units）单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。

vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。

vh就是可视窗口的高度了。

这边顺便提一下vmin和vmax，vmin是指选择vw和vh中最小的那个，而vmax是选择最大的那个

 

四、百分比和vh的区别

假设浏览器高度900px, 

1 vh = 900px/100 = 9px

 

height: 100vh 与 height:100%的区别

height: 100vh：//当元素没有内容时候，会撑开，与屏幕高度保持一致

height: 100%： //当元素没有内容时候，不会撑开