Menu
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.
900
I usually choose EM because I want the size to be relative to the Heading's parent. But if you prefer to have the size be relative to the root (HTML) size, then choose REM instead. Or, you could set it to be relative to the viewport's width (VW) if that works better for your case.
A % length is relative to local context (containing element) width, while a vw length is relative to the full width of the browser window.
What is the difference between PX, EM and Percent? Pixel is a static measurement, while percent and EM are relative measurements. Percent depends on its parent font size. EM is relative to the current font size of the element (2em means 2 times the size of the current font).
While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size. Jeremy tends to favor em , because of the ability to control an area of a design. As in, scale the type in that specific area relatively.
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.
114
VW is viewport width (the visible size of the window) and em is the width of the letter 'm' in the current font.
So 5vh is 5% of the viewport and 5em is the width of 5 'm's.
Further Reading:
CSS Values and Units Module Level 3
Mozilla Developer Network article on CSS length units
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
