1

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?

John Doe
  • 11
  • 1
  • Possible duplicate of: http://stackoverflow.com/questions/22228568/switching-to-em-based-media-queries – Dan H Apr 20 '16 at 10:20

2 Answers2

0

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...).

Olivier Robert
  • 1
  • 2
  • When it comes to media queries, 1em == 1rem, because a media query specified in ems will always use the em value of the *root* element—which is essentially what a rem is. – RickL Jun 04 '16 at 10:43
0

  • 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.

goncalopinto
  • 433
  • 2
  • 8