Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of what vw refers to in css, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading what vw refers to in this css. Let's take a look at it.

In css, vw is a window unit, which is also a relative unit, which means the percentage of window width; vw is relative to the width of the window, which is the visual area of the client browser, the window is evenly divided into 100 units, and the size of the 1vw is 1% of the width of the window.

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

What is vw in css

A CSS unit is a unit of measurement, including a unit of size and a unit of color. We often use alignment units, which will not cause confusion in the layout of web pages in different views.

Vw is an abbreviation for Viewport's width, and 1vw is always equal to 1% of the width of the current viewport. Vw is a window unit, which is also a relative unit. Relative to the width of the viewport, the viewport is equally divided into 100 units of vw.

The advantage of vw is that it can get the width directly, and using% can't get the width of the visual area correctly without setting the width of body, so this is a good advantage.

The viewport here refers to the visible area of the browser, as shown below:

Sample code:

H2 {font-size:8vw;}

If the width of the viewport is 200mm, the font size of the H2 element in the above code will be 16mm, that is, (8x200) / 100

Examples are as follows:

.p1 {font-size:5vw;} .p2 {font-size:5px;} text relative to the width of the viewport

Px width-sized text

Output result:

This is the end of the article on "what does vw in css refer to?" Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what does vw refer to in css". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.