CSS之vw,vh视口单位与%的区别

CSS中的vw,vh单位是什么？vw：浏览器可见视口【宽度】的百分比（1vw代表视窗【宽度】的1%）vh：浏览器可见视口【高度】的百分比（1vw代表视窗【高度】的1%）vmin：当前 vw 和 vh 较小的一个值。vmax：当前 vw 和 vh 中较大的一个值。注：视窗与可见视口是一个意思vw,vh与 % 的区别是什么？% 是基于【父元素】的宽度/高度的百分比，vw，vh是根据视窗的宽度/高

Ocean_HL

15795人浏览 · 2021-07-11 19:47:05

Ocean_HL · 2021-07-11 19:47:05 发布

CSS中的vw,vh单位是什么？

vw：浏览器可见视口【宽度】的百分比（1vw代表视窗【宽度】的1%）
vh：浏览器可见视口【高度】的百分比（1vw代表视窗【高度】的1%）
vmin：当前 vw 和 vh 较小的一个值。
vmax：当前 vw 和 vh 中较大的一个值。

注：视窗 与 可见视口 是一个意思

vw,vh与 % 的区别是什么？

% 是基于【父元素】的宽度/高度的百分比，vw，vh是根据视窗的宽度/高度的百分比。
视口单位优势在于【vh】能够直接获取高度，而用 % 在没有设置 body 高度情况下，是无法正确获得可视区域的高度。

实例之让body元素与浏览器的可见视口一样高

body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 100vh让body的高度与视口一样高 */
    height: 100vh;
    /* margin + overflow 用于隐藏body外边距造成的滚动条 */
    margin: 0;
    overflow: hidden;
}