vw = view width
vh = view height
这两个单位是CSS3引入的,以上称为视口单位允许我们更接近浏览器窗口定义大小。
视口单位(Viewport units)
Q:什么是视口?
A:Peter-Paul Koch(”PPK大神”)提出视口的解释是:
在桌面端,指的是浏览器的可视区域;在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。
视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。
vh/vw与%区别
单位 | 解释 |
---|---|
vw | 1vw = 视口宽度的1% |
vh | 1vh = 视口高度的1% |
vmin | 选取vw和vh中最小的那个 |
vmax | 选取vw和vh中最大的那个 |
比如:浏览器视口尺寸为370px,那么 1vw = 370px * 1% = 6.5px
(浏览器会四舍五入向下取7)
vh/vw与%区别在于
单位 | 解释 |
---|---|
% | 元素的祖先元素 |
vh/vw | 视口的尺寸 |
参考文章vh,vw单位你知道多少?
网友评论