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).
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
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! :)
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'm working with Zurb Foundation (v4) which is using EMs and not PX.
One down side i found with using EMs is when an element has a margin set by $column-gutter (e.g. 0.9375em)
If the element has font size which is NOT 1em (e.g. 0.875em) then the margin on this element is smaller (since ems is relative to the font-size) than an element that its font size is 1em.
So if I have the 2 elements next to each other the actual margin outcome on both is inconsistent.
I really want to keep the margin on elements consistent even if an element has a different font-size.
Is there a smart way to achieve that (without using px)?
EM values are always a multiple of the parent's font size.
For example, if the font-size of the element is 0.875em , then the margin of that element will be multiplied by 0.875. The base font size in Foundation 4 is 16px, therefore the mentioned element's font-size will be 0.875*16 = 14px. The margin is set to 0.9375em, which will be 0.9375*16*0.875=13.125px in this example.
If you want a 15px margin everywhere either always divide it by the parent's font size (in the example by 0.875, so use (0.9375/0.875)EM instead of 0.9375EM), or use REM, which is relative to the base font-size (which is 16px in Foundation 4), so you don't have to deal with the parent's font-size.
If there are more parent elements in the HTML-hierarchy, you need to pay respect to all of them.
You could use the unit rem, which is similar to em but relative to the font size of the root element (html).
It does not work on IE8 or lower, unfortunately. But there is a Polyfill for it.