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.
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.
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
The main difference is the reference point for each unit. VW, VH, VMIN, and VMAX scale with the viewport ('window') size.
On the other hand, EM scales with the font-size of the element. So for example, if you have a font-size on the body and h1 elements in your css:
body {
font-size: 16px;
}
h1 {
font-size: 2em;
}
All the text in your document would have a font-size of 16px EXCEPT the h1, which would have a font-size of 32px. However with,
body {
font-size: 16px;
}
h1 {
font-size: 2vw;
}
The font-size for h1 elements would scale with the viewport's width (2% of the viewport width to be specific).
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.
Whereas vw refers to the font-size relative to the viewport which changes from device to device. So, 14vw = 14*1/100 = 1.4% of the width of your viewport.
14 * 1/100 = 14%.
On the other hand, the question was about he difference between em and vw. So, best is to relate them to the same reference frame.
First of all, we talk abour screen media, and not print.
As em correspond, basically, to 16px (width of the letter “m” - thanks BSMP above - of the current font) and vw correspond to 1/100 of the viewport width, let’s relate them:
On 1.440 px viewport width divided by 16 => 90 em on this line, or 100 vw.
So, 1em would correspond to 1,1111 vw (in fact, 1 rem = 1,1111 vw).
Now, for responsive design, if using em, set the font-size at the container level and play with em.
If using vw, it’s one value vith no dependency but thewidth if the viewport. Sometime is better to set a minimum value, maybe in px, to avoid a font-size unreadable because physical size.
Good luck! :)
Related
This question already has answers here:
Should I use px or rem value units in my CSS? [closed]
(10 answers)
Which unit I should use in CSS when designing a web page
(6 answers)
What is the difference between px, em and ex?
(4 answers)
Closed 3 years ago.
I'm looking for some explanation regarding these units' use on image dimensions, but can't find any. I've read in some places to forget about pixels and use only rem/em, but I don't know if it's also applied for images dimensions (width/height).
For example, which one should I use in this case below?
<img src="https://i.imgur.com/NReN4xE.png" style="width: 5rem;" />5rem<br>
<img src="https://i.imgur.com/NReN4xE.png" style="width: 5em;" />5em<br>
<img src="https://i.imgur.com/NReN4xE.png" style="width: 100px;" />100px<br>
px renders the pixel value
rem uses the root element (html) using its font-size as the base (16px by default) to calculate its size, so basically your rem value from img multiplied by the font-size on html
em uses the first parent with a font-size to calculate the size it needs to render (calculated the same as rem above - parent computed px value multiplied by your em). If a that parent is using em in its font-size, the child will use the computed/calculated font-size of the parent.
Explanation can be tough to grasp (especially em), have a look here: https://jsfiddle.net/6ydf931w/
For the most part, I tend to avoid using em for almost everything because it can result in unexpected results if you are not permanently aware of where it is used.
I usually limit rem to text in the event it needs to be changed globally.
px is very predictable, if this works for you, there is no harm in using it.
Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
**(px)**The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.
Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.
em Relative to the font-size of the element
rem Relative to font-size of the root element
Use REMs for sizes and spacing.
Use EMs for media queries.
In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have.
It's a better practice to use rem instead of pixels if you want a responsive website. This is because pixel is an absolute unit while rem is a unit relative to your root's font-size.
Imagine that you have all your elements in pixels and want to scale everything when your window is smaller. If you had pixels you would have to change everything one by one. However with rem you can change your root's font size and everything is scaled all at once.
Try changing the font size in the example below and see by yourself:
html{
font-size: 30px;
}
.pixel1{
width: 30px;
height: 30px;
background-color: red;
margin-bottom: 10px;
}
.pixel2{
width: 40px;
height: 40px;
background-color: red;
margin-bottom: 10px;
}
.rem1{
width: 1rem;
height: 1rem;
background-color: blue;
margin-bottom: 10px;
}
.rem2{
width: 1.4rem;
height: 1.4rem;
background-color: blue;
}
<div class="pixel1"></div>
<div class="pixel2"></div>
<div class="rem1"></div>
<div class="rem2"></div>
Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. If you use a value of 1em or 1rem, it could translate in the browser as anything from 16px to 160px or any other value.
px values are used by the browser as is, so 1px will always display as exactly 1px.
Translation of rem units to pixel value is determined by the font size of the html element.
Translation of em units to pixel values is determined by the font size of the element they’re used on. Use em units for sizing that should scale depending on the font size of an element other than the root.Use rem units for sizing that doesn’t need em units, and that should scale depending on browser font size settings.Use rem units on media queries
ul {
margin-left: 1.25rem;
list-style-type: disc; }
Foundation uses % for margin-left and margin-right.
However on unordered list they use rem for margin-left.
I'm having trouble understanding the logic behind this.
Rems are similar to % and em as they are fractionally based off of the base font size (default 16px). Unlike % and em, rem units do not inherit a parent element's font size. With % and em, as you nest elements, you'll see the font size get smaller and smaller. This doesn't happen with rem units. Instead, no matter where in the DOM hierarchy an element is, a rem-sized element always references the base font size.
Using rem for the margin and padding that surrounds text elements provides scalability within a layout. padding: 10rem; # 16px base font size yields 160px of padding. changing the base font size would not only scale the font size up or down, it would change surrounding elements that use rem units proportionally. Foundation also uses rem for media queries. The idea is, if you increased the base font size, not only would font sizes get bigger and containers would grow, breakpoints would be triggered sooner.
Percentages are used mostly on the grid because those scales perfectly; the left margin of lists generates the indentation of the list, which is text-related design rhythm, so using the base font size (rem) is quite logical (to me).
Currently working on my first highly responsive site. I've worked through a few basic tutorials about that topic, though I've often noticed that they rely on slightly older mobile devices and they switch the designs by #media depending on the screen size attributes.
Now we have mobile devices which have the same FullHD resolution on a 6" screen like on a 24" monitor... so that can impossibly work.
So what can I use to scale text and things like menus correctly? I'd like not to use percentage values absolutely everywhere.
My intuitive idea would be to compute a reference size of which I know that it has always the same size on the screen. Or at least something what can give me a hint of how to adjust the sizes.
I tried to used the "em" measurement in CSS for that by creating an element with this size and then measure it's height via Jquery, since from how I understood it, "em" is a browser-depending size.
Still the result is always 16px, no matter what browser I use...
So what type of relative size reference is usually used for this issue?
Thanks in advance!
You have differents units for relative length in CSS :
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
vmin Relative to 1% of viewport's smaller dimension
vmax Relative to 1% of viewport's larger dimension
% Relative to parent
The em and rem units are practical in creating perfectly scalable layout!
Source: http://www.w3schools.com/cssref/css_units.asp
You probably want to try using the min-device-pixel-ration media query (have a look at https://css-tricks.com/snippets/css/retina-display-media-query/)
If you have the same number of pixels on a 6" screen as you would normally get on a 24" monitor it is almost certainly going have a ration greater than 1 on the smaller screen. Otherwise it would be virtually impossible to read!
the default value for an em unit is 16px - however, you can reset this value to anything you want by changing it in the body tag.
body {
font-size: 1em;
}
So using that example 1em = 16px, 2em = 32px, 3em = 48px ect.
This website is a great resource for how to scale ems so you don't have to do the math: http://type-scale.com/
Keep in mind when using ems there is a compounding effect when using nested elements. So if you have a div with a font-size of 1em, inside of a div with a font-size of 2em, you will actually end up with a font size of 3em.
To prevent this you can either pay attention to your nesting, or use rem units. rem stands for root em and will always scale relative to the root element and ignore multiple nesting values.
I am creating a template for responsive website. I learned that em is good to use in responsive design.
But problem is that I set the body font-size to 62.5% but when I am using p,span and other elements font-size like 2em than 2 em is different from 20px. according to my default font-size it should be 2em=20px anywhere in the body as 62.5% overrides default 1em=16px to 10px.
Please suggest what I should change so that in whole body whenever I set font-size of any element to 2em then it would be same a 20px.
BODY {font-size:62.5%}
This takes 16px down to 10px. From now on it’s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc.
.element {
font-size: 20px;
width: 4em;
height: 4em;
}
Then that means that the width and height of the element (defined here as 4em x 4em) would compute to 80px x 80px (20px * 4 = 80px).
Read 1
Read 2
You can't. Use rem instead. It refers to the font size of the root element.
It might be the issue that your font size inherits from any parent tag...
You cannot. The em unit equals, by definition, the font size of the element or, for font-size setting alone, the font size of the parent element.
The conclusions depend on what you really want to do, which is not clear from the question. If you want specific sizes in pixels, using the px unit (with all its vagueness). If you want adjustable sizing, so that you or the user can easily change the basic font size and have all other font sizes scaled accordingly, use consistently the em unit or the % unit, with due consideration of element nesting. For example, use font-size: 2em only when you want the font size to be 2 times the size of the parent element’s font size—using a different value if you want a a different ratio.
I am building a responsive app targeted to desktop, tablet and mobile phone using HTML and CSS but I am not sure what unit font size should I use that the font fits well in any size screen. What's difference between em, px, pt and percent? What's the best choose for me?
I would like to hear real experiences about it in responsive apps for desktop, tablets and mobile phones
I would be thankful for any help!
You might want to take a look at this article: little link.
Update: Here's a tiny bit of explanation about how this applies in your case:
px: a pixel is a tiny square (generally) in your device's display that can show only one color at a time. Your screen resolution specifies how many pixels your screen/display is made of. So when you specify: font-size: 12px;, you're basically telling the browser that each letter should be 12 pixels high (approximately -- different letters vary in height a bit, but the relative difference is preserved).
percentages: font-size: 50%; sets the font size of your element to 50% of the font size of its parent element.
pt: 1pt (point) is 1 / 72 of an inch. Setting font-size: 12pt; sets the height of your characters to 12 / 72 inches (again, different characters differ a bit).
em: em is the width of the letter 'm' in the selected typeface, basically the same as percentage, except that 1em is 100% and 1.5em is 150%.
So your choice would probably be px since it would preserve the logical proportions of text size to other sized elements.
Various dimensions are
“Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc..
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One problem with the pixel unit is that it does not scale.
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Viewport units : - These are relative to the view port. They are new in CSS3
3.2vw = 3.2% of width of viewport
3.2vh = 3.2% of height of viewport
3.2vmin = Smaller of 3.2vw or 3.2vh
3.2vmax = Bigger of 3.2vw or 3.2vh
see kyleschaeffer.com/.... and css-tricks.com/....
But to achieve responsive typo look at https://stackoverflow.com/a/21981859/406659
It seems to me the best will be the incoming rem and vmin units as documented here.
To cope with older browser you may want to have some CSS fall backs defined something like:
p, li
{
font-size: 12px;
font-size: 0.75rem;
}
or
p, li
{
font-size: 12px; /* old */
font-size: 1.2vm; /* IE9 */
font-size: 1.2vmin;
}
(credit to Craig Butler)
Try using a mix of px, em, and rem.
Chris Coyier explains in this post that using px for your document, rem for your modules (ie. sections of your page), and em for text elements within your modules, the page will scale cleanly.