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设定的大小只和视窗大小有关,和他们的父元素高度宽度没关系,可以用来开发自适应多种屏幕设备。

你可能感兴趣的:(css)