vh和vw单位
2018-11-24 本文已影响10人
siberiawolf0307
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单位你知道多少？
