What is the unit of css vw?

In CSS, vw is a length unit, and a viewport unit refers to the width relative to the viewport; the viewport will be divided into 100 units of vw, then 1vw is equal to 1 of the viewport width %, for example, if the width of the browser is 1920px, then "1vw=1920px/100=19.2px".

(Recommended tutorial: CSS video tutorial)

Viewport units

What is a viewport?

On the PC 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).

The "viewport" in the viewport unit refers to the visible area of ​​the browser on the PC side; on the mobile side it refers to the Layout Viewport in Viewport.

According to the CSS3 specification, the viewport unit mainly includes the following 4 units:

1.vw: Relative to the width of the viewport, the viewport is evenly divided into 100 units of vw, and 1vw is equal to the viewport. 1% of mouth width.

2.vh: Relative to the width of the viewport, the viewport is divided into 100 units of vh, and 1vh is equal to 1% of the viewport height.

3.vmin: Select the smallest one between vw and vh.

4.vmax: Select the largest one between vw and vh.

vw and vh

The full names are Viewport Width and Viewport Height. The width and height of the window are equivalent to 1% of the screen width and height.

vh and vw: height and width relative to the viewport, not the parent element (CSS percentages are relative to the height and width of the nearest parent element that contains it). 1vh is equal to 1/100 of the viewport height, and 1vw is equal to 1/100 of the viewport width.

For example: the browser height is 950px, the width is 1920px, 1 vh = 950px/100 = 9.5 px, 1vw = 1920px/100 =19.2 px.

The difference between vh/vw and %

Code:

<style>
body{background-color:orange;}
.p{width:50vw;height:50vh;background-color:pink;fontsize:3em;}
</style>

<p class="p">P 标签的宽度为 50vw</p>

Effect:

Explanation:

1 vw is equivalent to 1% of the page width. For example, the page width is 1000px, then 1vw
is 10px, and vh is the same.

The width of the P tag is 50vw, so it is 50% of the page width, and the height is 50vh, so
is 50% of the page height.

For more programming-related knowledge, please visit: Programming Learning! !

The above is the detailed content of What is the unit of css vw?. For more information, please follow other related articles on the PHP Chinese website!