What does vh mean in css3

In CSS3, vh means "percentage of window height", which is a window unit and a relative unit; vh is relative to the height of the window, and the window is the visible area of the client browser. Area, the window is evenly divided into 100 units, and the size of 1vh is one hundredth of the height of the window.

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What does vh mean in css3

vh is determined relative to the height of the viewport (viewport), 1vw is equal to 1/100 of the viewport width.

On the client side, the viewport refers to the visible area of the browser;

On the mobile side, it involves 3 viewports: Layout Viewport (layout viewport), Visual Viewport (Visual viewport), Ideal Viewport (ideal viewport). It refers to Layout Viewport. "Viewport" refers to the size of the visible area inside the browser, that is, the size of window.innerWidth/window.innerHeight, excluding the size of the browser area of the taskbar title bar and bottom toolbar.

The vh unit can automatically change the size according to the height of the window. 1vh is 1% of the window height;

vw and vh are relative to the viewport (viewport, which can also be called the viewport, horizon or the width and height of the visible range).

Extended knowledge:

vw: Percentage of viewport width (1vw is equal to 1% of viewport width)

vh: Viewport width Percentage of the port height (1vh is equal to 1% of the viewport height)

vmin: Select the smallest one between vw and vh

vmax: Select the largest one between vw and vh

vw, vh are based on the viewport, not the parent element. 1vw is equal to 1/100 of the viewport width, 1vh is equal to 1/100 of the viewport height, for example:

The browser height is 950px, the width is 1920px, 1vh = 950px/100 = 9.5 px, 1vw = 1920px/ 100 =19.2 px

The difference between vw, vh, and %

% is the ratio set relative to the size of the parent element, vw vh is determined by the viewport size

vw and vh can directly obtain the height, but % cannot obtain the height of the visible area if the height of the body is not set.

(Learning video sharing:css video tutorial)

The above is the detailed content of What does vh mean in css3. For more information, please follow other related articles on the PHP Chinese website!