vw/vh和100%的区别

在实现自适应布局时往往会用到vh/vw和100%，那么vh/vw和100%的区别是什么呢？要了解他们之间的区别，首先要了解vh、vw。

vh/vw

视口（viewport） 在桌面端，指的是浏览器的可视区域；在移动端，指的是Viewport中的Layout Viewport。浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
在css3规范中，1 vw 等于视口宽度的1%，1 vh 等于视口高度的1%。vh 和 vw 是相对于视口的高度和宽度。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px ;
100 vh = 950 px, 100 vw = 1920px (100 vh 和 100 vw 即视口的高度和宽度)

vw/vh和100%的区别

100%是相对于包含它的最近的父元素的高度和宽度。
vw (viewport width) vh (viewport height) 是相对于视口的宽度和高度，用vw，vh设定的大小只和视窗大小有关，和他们的父元素高度宽度没关系，可以用来开发自适应多种屏幕设备。