Css Units - Difference Between Vh/Vw and %

body,html {    height: 100%;}
.parent {    background: lightblue;    float: left;    height: 200px;    padding: 10px;    width: 50px;}
.child {    background: pink;    height: 100%;    width: 100%;}
.viewport-height {    background: gray;    float: right;    height: 100vh;    width: 50px;}

<div class="parent">    <div class="child">        100% height        (parent is 200px)    </div></div>
<div class="viewport-height">    100vh height</div>

What is the difference between using vh/vw vpx and Regular PX/%?

It is always better to use relative sizing with web elements (such as width / height / font-size etc) - so setting explicit pixels is soooo last century. Setting fontsize with em or even better REM values and setting height / widht with percentages is a better approach.

width: 100%; - will size the width of the element to be 100% of its container

width: 100vw; - will size width of the the element to be 100% of the viewport width

1vw = 1% of the viewport width

100vw = 100% of the viewport width

by the same token -

1vh = 1% of the viewport height
100vh = 100% of the viewport height

Interestingly there is also vmin and vmax - which relate to the smaller and larger sides of the viewport
1vmin = 1% of the viewport smallest side
100vmin = 100% of the viewport smallest side

1vmax = 1% of the viewport largest side
100vmax = 100% of the viewport largest side

vmin and vmax are useful for allowing content to change when you rotate the screen in which the vw and vh won't change but the vmin and vmax will.

What is the difference between % and vw in css?

They aren't necessarily interchangeable.

The behavior will mainly depend on the element's position in the DOM, since this will determine what the element's containing block is. If an element has a width of 100%, it will have a width of 100% of the containing block's width. If the element has a width of 100vw, it will have a width of 100% of the viewport's width (the viewport may not be the element's containing element, but viewport-percentage units will always be relative to the viewport).

A strictly percentage based width will always be relative to another element's width, but when using viewport-percentage lengths, an element's width can actually be relative to the viewport's height. For instance, if an element has a width of 100vh, it will have a width of 100% of the viewport's height. This isn't possible when using strictly percentage based widths.

Viewport-percentage length are always going to be relative to their initial containing block, which is the viewport:

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

Whereas percentage based units are going to be relative to their parent element (i.e., their containing block), which may happen to be the body/html element, in which case they will be similar to viewport-percentage lengths.

4.3. Percentages: the ‘<percentage>’ type

Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block). When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.

How do vw and vh units work?

vw and vh are a percentage of the window width and height, respectively: 100vw is 100% of the width, 80vw is 80%, etc.

To calculate the value in pixels, you would just do something like

vwToPx = function(vwValue) {
    return $(window).outerWidth()/100*vwValue;
}

One thing you should be aware of is that mobile Safari still renders vh incorrectly, and anything but the most recent Android browser can't handle either unit. See caniuse.

For more information, you might look at this article on csstricks.com.

In CSS, what is the difference between VW and EM?

I am wondering what is the main difference between VW and EM, as both
of the they scale with the window size and both of them are using in
responsive design.

VW is -- as several have correctly stated -- a percentage width of the viewport.

Considering small smart devices have usually tall narrow viewports and larger, laptop type devices have much more letterbox shaped viewports, this value has a potential to give curious, imperfect results.

EM, is a measurement of the scale of a font compared to the rules direct parent.

Several answers here seem to be making some fundamental errors in definitions of font sizes. Such as stated:

em refers to the current font-size and scalable with respect to it.
For instance, if the font-size of document is 14px, then 1em = 14px;
2em = 28px and so on.

This is only correct if the rule that states 1em is a direct child of the document or has no other font scaling rules applied to it. It can easily happen that the font size of the document is 14px, the child element has font size as 2em and then that childs child has a font size of 1em which means then that both layers of children have fonts displaying at 28px.

This obviously can cause serious confusion when creating sites. the EM value is only the proportion of the parents font size. Take this example:

html {
    font-size:14px;
} 

h1 {
    font-size:1.5em;
}
p {
    font-size:0.9em;
}
main {
    font-size:1.15em;
}
.container {
    font-size:1.1em;
}

So, with the HTML:

<html>
<body>
    <main>
        <div class="container">
        <h1>Header</h1>
        <p>Some paragraph text</p>
        </div>
    </main>
</body>
</html>

So what is the font size of the paragraph contents? Is it 0.9 x 14px ? No, it is in fact

14 x 1.15 x 1.1 x 0.9 = 15.94px

because each em is relative to its direct parent only. This is obviously a very easy way to obfuscate and obscure the actual values as you're working on a CSS file, unless you enjoy using a calculator. A solution is to use Root em, which is rem and this is the em proportion of the root value font size which is set out in the html element tag.

So, if you return to the CSS with:

p {
    font-size:0.9rem;
}

This will now be sized as 14 x 0.9 because it is taken the font size as defined in the root element (HTML, not the body tag). this is a much cleaner way of defining font sizes than using just em's.

CSS - What is best to use for this case (px, %, vw, wh or em)?

Note that I only mentioned the ones you asked about.

Here you can see the full list of CSS measurement units: CSS Units in W3Schools

Rather than telling you which one is the "right one", I would rather want you to understand what each one actually is.

Pixels (px): Absolute pixels. So for example, 20px will be literally 20 pixels on any screen. If a monitor is of 1980x1200, and you set an element's height to 200px, the element will take 200 pixels out of that.

Percentage (%): Relative to the parent value.

So for this example:

<div style="width: 200px;">
    <div style="width: 50%;"></div>
</div>

The inner div will have a width of 100 pixels.

Viewport height/width (vw/vh): Size relative to the viewport (browser window, basically).

Example:

.myDiv {
    width: 100vw;
    height: 100vh;
    background-color: red;
}

Will make an cover the whole browser in red. This is very common among flexboxes as it's naturally responsive.

Emeters (em) and Root Emeters (rem): em is relative to the parent element's font size. rem will be relative to the html font-size (mostly 16 pixels). This is very useful if you want to keep an "in mind relativity of sizes" over your project, and not using variables by pre-processors like Sass and Less. Just easier and more intuitive, I guess.

Example:

.myDiv {
    font-size: 0.5rem;
}

Font size will be 8 pixels.

Now that you know, choose the right one for the right purpose.

---

Related Topics