Meaning of VH and VW in CSS - difference between VH, VW, %, PX

Question

Meaning of VH and VW in CSS - difference between VH, VW, %, PX

What is the difference between VH, VW, % and PX in CSS ? What does VH and VW do ?

0

Report

30 Mar 2022 at 06:52 PM

Stor

css

1 answer

OK

Tim · Answer 1

Hi,

All of them VH, VW, % and PX are units for expressing a length in CSS. Both VH (viewport height) and VW (viewport width) are relative length units.

1 viewport unit is relative to 1% of the width or height of the viewport.

For example, when the height is set to 100vh, it is equal to 100% of the viewport height:

<style>

body {
padding: 0px;
margin: 0px;
}

.content {
height: 100vh;
width: 100%;
background-color: aqua;
}

</style>

<body>
<div class='content'>Text</div>
</body>

Meaning of VH and VW in CSS - difference between VH, VW, %, PX

css

Different background color for Odd / Even table rows - CSS

CSS font-size units PX to PT, IN, EM, REM conversion

Smooth move of HTML elements - animation with CSS

Full screen Not Clickable overlapping layer / overlay - CSS

How to change Checkbox to Toggle slider button using CSS ?

How to change top address bar color in mobile web browsers - CSS

Set CSS/HTML opacity - transparent background but not text