Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the difference between vw and vh in css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The difference between vw and vh in css: vw units can automatically resize according to the width of the window, "1vw" is the "1%" of the window width, vh units can automatically resize according to the height of the window, and "1vh" is the "1%" of the window height.

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

What is the difference between vw and vh in css

In css, the differences between vw and vh are:

Vw units can be resized automatically according to the width of the window. 1vw is 1% of the width of the window.

Vh units can be resized automatically according to the height of the window. 1vh is 1% of the height of the window.

Vw is an attribute of css, similar to px,rem, etc., and belongs to the unit of length. In the browser, 1 vw = width of viewport / 100

According to this feature, vw can help us achieve adaptive layout on the mobile side, which has the advantage of WYSIWYG or even better than rem, because there is no need for additional computing at all.

It is recommended to be used with css preprocessing languages such as sass and less, because they can define variables and functions and are of great help in using vw.

Vm, vh, vmin, and vmax are both window units and relative units. It is not relative to the parent node or the root node of the page. Instead, it is determined by the size of the Viewport, unit 1, which is similar to 1%. Viewport is the area where your browser actually displays content-in other words, your web browser that doesn't include toolbars and buttons.

The details are as follows:

Vw: percentage of window width (1vw represents window width of 1%)

Vh: percentage of window height

Vmin: take the smaller value of the current Vw and Vh

Vmax: take the larger value of the current Vw and Vh

Vh and vw are relative to the height and width of the viewport, 1vh equals to the height of 1x100, 1vw equals to the width of the viewport, such as: browser height 900px, width 750px, 1vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px, it is easy to achieve a frame as high as the same screen.

Examples are as follows:

Vh_CSS reference manual _ web front-end development reference manual series. P1 {font-size:5vh;} .p2 {font-size:5vw;} text relative to viewport height

Text relative to the width of the viewport

Output result:

This is the end of the content of "what is the difference between vw and vh in css". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.