What does vh mean in css3

This article mainly introduces the relevant knowledge of "what vh refers to in css3". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "what vh refers to in css3" can help you solve the problem.

In css3, vh means "percentage of window height" and is a unit of window height, which is also a relative unit;vh is determined relative to the height of the window, which is the visible area of the client browser, and the window is divided into 100 units.

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

What does vh mean in css3?

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

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

On the mobile side, it involves three viewports: Layout Viewport, Visual Viewport, and Ideal Viewport. refers to Layout Viewport, "Viewport" refers to the size of the visible area inside the browser, i.e. window.innerWidth/window.innerHeight size, excluding the size of the browser area of the taskbar title bar and the bottom toolbar.

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

vw and vh are the width and height relative to the viewport (also known as viewport, horizon, or visible range).

Extended knowledge:

vw: Percentage of viewport width (1vw equals 1% of viewport width)

vh: Percentage of viewport height (1vh equals 1% of viewport height)

vmin: Select the smallest of vw and vh

vmax: Choose the largest of vw and vh

vw, vh are viewport based, not parent elements. 1vw equals 1/100 of the viewport width and 1vh equals 1/100 of the viewport height, for example:

Browser height 950px, width 1920px, 1vh = 950px/100 = 9.5 px, 1vw = 1920px/100 =19.2 px

Difference between vw, vh, %

% is the ratio relative to the parent element's sizing, vw vh is viewport sizing

vw, vh can directly get the height, and % If you do not set the height of the body, you cannot get the height of the visible area.

The content of "what does vh refer to in css3" is introduced here. Thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.