I am learning how to work with CSS using EM. (I am used to always using px)
I saw the following media query
#media screen and (min-width: 50em){
}
I was just wondering what is the 50em relative to?
When I was reading about EM it specifies that Em is Relative to the font-size of the element (2em means 2 times the size of the current font)
But with min-width there is no font size?? I am a bit confused here.. any help would be really appreciated.
In this case, the 50em is referencing the base font size, which is (for most browsers) 16px. It can be configured by the users pre-defined preferences within the browser.
Some browsers will either set the root html element (which rem is based upon) to be 16px or a percentage of the base font size as defined above.
Related
Many websites write code that have broken the ability for users to set their own font size (in the settings of the browser/mobile). In order to avoid this, what exactly happens on a technical level when the user changes the default font size? What does it affect?
the html root element font-size that is specified in CSS? Does it scale or override this?
the units em, px, rem, %?
what about other units, like vh, vw, vmin, vmax for those that are trying to do fluid typography?
how will this affect calc()?
is the behavior the same for mobile devices?
Notes that don't yet form a full answer:
However, none of the below refer to specifications, but are just collections of specific behaviors.
From my own experiments, setting font-size for html with a % does scale when the user changes the browser font size.
This answer has some information, seeming to say that when html is set, px doesn't adjust, but em, rem, % do.
This site has some really good info, but it is all a decade old and uncertain if the behavior mentioned is just because of browser bugs or if it's designed that way.
There is a lot of sloppy language that people use when talking about this. For example, people will talk about the 'base font size', but not specify if this is the font specified in the root/html element, the browser settings, or the combination of the two. I'm sure it's clear to those who already know the interactions, but to me I still have the concepts unclear.
The user-defined font size determines the base font size of the root element html. The initial value of font-size as specified by CSS is medium, which in all desktop browsers corresponds to this user-defined size (except Microsoft Edge which follows Windows DPI and accessibility settings rather than having its own). Mobile browsers don't seem to honor the system-wide preference typical of mobile devices, unfortunately. At least, none of Safari on iOS, Internet Explorer on Windows Phone 8.1 or Microsoft Edge on Windows 10 Mobile do.
All other keyword values of the font-size property defined here are scaled to this size, so if the user-defined size is 20px, medium corresponds to 20px and small will almost certainly correspond to a size smaller than 20px.
Media query rems and ems are calculated directly off of this user-defined size, irrespective of the specified font-size property of the root element. Each of the following media expressions:
(max-width: 30rem)
(max-width: 30em)
is equivalent to (max-width: 480px) when the user-defined size is 16px, and (max-width: 600px) when the user-defined size is 20px.
Style rule rems on the other hand are calculated off of the specified font-size of the root element. The following rule:
:root { font-size: 50%; }
makes 1rem in a style rule equivalent to 8px when the user-defined size is 16px, and 10px when the user-defined size is 20px.
Style rule ems and percentages are always calculated relative to ancestor elements so their behavior doesn't change. If the font size of body is declared in ems or percentages then it'd be based off of whatever the font size of html (its parent) is, for example. So on and so forth for all its descendants that don't specify some other size.
The px unit corresponds to a CSS pixel and so its metrics are never affected by the user-defined font size.
The behavior of viewport units and calc() doesn't change, since none of those things depends on an element's font size. As their name suggests, viewport units scale to the size of the viewport.
The most noticeable overall effect this can have on a layout that sizes everything (including widths and heights of boxes) in rems and ems, is that the user can scale the entire layout just by changing their preferred font size. I don't know how useful this is anymore, especially when zoom is a thing.
So, to ensure that your copy is able to accommodate the user's preferred font size without forcing them to zoom, specify all your font sizes in rems or ems where possible. Especially do not specify a pixel font size on html, as that will override the preference completely. You don't necessarily have to specify widths and heights in rems or ems — this really depends on your layout. Not all fluid layouts scale well with different sizes. The most important aspect of this, really, is the size of text, since this feature is intended to scale text to improve readability.
There's quite a lot of resources encouraging to use ems over pixels in media queries. However, none of them easily explains the obvious doubt about it:
If I have two divs and I want to hide one of them on iPhone4-like devices, how do I do it with em-based media queries? The device resolution is 640x960 in pixels.
In every article there a note that usually 1em = 16px. But since it is not certain, why would I want to convert to ems and risk breaking my design? What if user changes his default font to 20px? Or 10px? My div will hide either too soon or too late.
Example from Foundation:
/* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) { }
How can I be sure it really is 641px and not 1282px? Why would anyone use something so untrustworthy instead of old good pixels?
First the sizing in em cannot be changed by the user as this is a browser setting that cannot be changed. So at best it could vary between browsers but I don't know any that differs from this standard. For that reason, it can be considered quite safe to use.
But for media queries, I would recommend to use rem units. em units is mostly preferred for font sizing in components as it scales relatively based on the parent DOM element. While rem units work well for sizing root elements (width, height...).
px is an absolute unit of measurement (like in, pt, or cm) that also
happens to be 1/96 of an in unit. Because it is
an absolute measurement, it may be used any time you want to define
something to be a particular size, rather than being proportional to
something else like the size of the browser window or the font size.
em is not an absolute unit - it is a unit that is relative to the
currently chosen font size. Unless you have overridden font style by
setting your font size with an absolute unit (such as px or pt), this
will be affected by the choice of fonts in the user's browser or OS
if they have made one, so it does not make sense to use em as a
general unit of length except where you specifically want it to scale
as the font size scales.
Based on this, the most accurate option is using px instead of embased on what you are asking, but you can always redefine your fonts and use rem instead, this is better for responsive websites, together with percentages. That's a matter of judgment in every single element you are adding to your website, and of course, lots of testing to make sure it looks good and works flawless on any resolution and devices.
I personally prefer to do it this way:
I define my fonts and font-sizes (this overrides the default ones)
I use percentages for the block elements
I use rem for the fonts and media queries
But of course sometimes I have to use pixels or change some of my "default" rules depending on my needs. As I said before, it's too a matter of judgement on your needs and on it is best.
Note: The em unit is relative to the font-size of the parent. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.
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.
How can browsers understand the em unit when used in a responsive image?
<img alt="A giraffe" src="giraffe.jpg"
srcset="giraffe#1.5x.jpg 600w, giraffe#2x.jpg 800w, [etc.]"
sizes="(max-width: 40em) 40em">
This validates, and I'm not seeing warnings in browser consoles. But if the whole point of the image preloader is to fetch images before the CSS is downloaded and parsed, what does the browser use for em?
Is it just its default font-size that it applies to <html>? Should I use rem for clarity? Is there a difference between the two when the user zooms?
This isn't theoretical; I'm using em in my media query breakpoints, and some images are constrained by a container sized for optimal line length (using em, of course).
I checked the spec, but it's remarkably terse on the new responsive image features.
I bent the ears of the guys inside the official W3C #respimg chatroom, and this is what they had to say:
<Tigt> Pardon me folks, I had a question about how em is interpreted when used inside sizes
<TabAtkins> Tigt: Same as in Media Queries - they're relative to the initial font size.
<TabAtkins> (Not the font size on <html>, the initial font size, as set by the user's personal settings.)
<Wilto> 16px almost everywhere, so long as you haven’t changed the font-size of html.
<TabAtkins> Tigt: rem is treated identical to em here.
So the speed-read is:
When used in sizes or media queries, em and rem are both specced to mean "the user's default font-size.
The actual em or rem that controls how the image is laid out on the page can end up different if your CSS changes it
This means one should not change the default size of em if they want to give the image preloader truthful information
W3C Media Queries:
This media query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.
#media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
The ‘em’ value is relative to the initial value of ‘font-size’.
5.1.1. Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units
Aside from ‘rem’ (which refers to the font-size of the root element), the font-relative lengths refer to the font metrics of the element on which they are used. The exception is when they occur in the value of the ‘font-size’ property itself, in which case they refer to the computed font metrics of the parent element (or the computed font metrics corresponding to the initial values of the ‘font’ property, if the element has no parent).
em unit
Equal to the computed value of the ‘font-size’ property of the element on which it is used.
http://www.w3.org/TR/css3-values/#font-relative-lengths
em css units are equal to the font size of the current element. The font-size property is inherited. Therefore the element (img in this case) will be sized according to 40 times the font-size property. If the user zooms the page (which increases the font size) the em unit's update to that of the font-size property automatically.
The base font size will be determined by the browser, if the browser is running on windows on mac and the user has not changed the font size then base font size will be 16px (usually). On Linux, BSD or any other system the font size will be set by the desktop environment and can vary.
So while conservatively you could assume that the font size is 16px, in a lot of cases you would be wrong.
I'm designing a website using rem unit, some people said, rem unit change the size based on screen size.
I try to drag the browser window to mobile size, and see from the chrome develop (the computed style)
And what I see is, it's still same like the desktop size. same 21px.
It doesn't change.
Can you explain, what does rem unit do?
Thanks.
The rem unit means the font size of the root element, which is the html element in HTML documents. That is, it is the “root em”. It has absolutely nothing to do with screen size.
The only thing that you gain by using rem rather than em is that you avoid doing some calculations yourself. Instead of taking into account the nesting of elements that may have different font sizes, you can anchor your font size settings to the font size of the root element. And what you lose is that some oldish browsers do not know the rem unit, so your rem based font size settings are ignored by them.
The practical way to make font sizes depend on screen size or window size (two different concepts) is to use CSS #media queries to set font-size (in some units) depending on the screen or window size (usually the width).