Media Queries: px vs em vs rem

I saw something from Google where they used pixels in their media queries.

Then I read something by @RyanReese where he said he uses em’s.

And in another thread of mine, I am starting to think that use rem’s would make my styles easier - at least for normal styling.

So what should I be using to device breakpoints in my media queries?

[ot]Mods: Should questions like this go in the HTML/CSS forum or the Mobile forum??
[/ot]

No, I actually use PX. I like Foundations general calculated sizes as a guideline for the general population who don’t actually do proper RWD (optimal media queries for what is needed, not specific queries for “tablet” or “mobile”). If that makes sense.

Frameworks don’t do RWD properly, yet they do it in a way that works for the general population. As such, they give “mobile” sizes, “tablet”, and “desktop”, etc. Those are generall pretty accurate (from my experience) about the general mobile/tablet/desktop sizes. They are a good reference point, but a lot of developers don’t really write optimal media queries depending on the designs need.

I feel like I’m rambling at this point.

To be honest, that article is aimed at the masses who use framework-based grid systems. I actually write media queries for whatever sizes need work (depends on the design).

I’d rather see you just go with px media queries.

Whew! That would drive me crazy thinking in em’s or rem’s for media queries!

My thinking exactly :slight_smile: .

Wow, for once @RyanReese and I agree, and the answer is the easy one!! :smile:

Try initial testing with breakpoints at:

1024px - tablet landscape
800px - tablet portrait
then 640px and 480px to cover smartphones

Of course the key is to test in as many devices as you can, that is full size, tablet and smartphone and adjust/remove/add breakpoints to suit the content.

It’s not really that hard, and once you get used to it, it makes more sense. This was a pivotal read for me: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

I perfer the other approach:

Rather than thinking about different devices and orientations and pre defined sizes, add queries according to the particular layout of that page. When things go pear shaped, add a query just before to remedy it.

I didn’t follow what she was saying…

Why did she claim using em’s saved here nav menu but pixels didn’t?

Because, the full width nav bar fits the screen at normal font size, but because she increased the font size, it no longer fitted. The screen is still so many pixels wide, that does not change, so no (pixel based) media query kicks in.
But if the media query is in em’s, when she increases the font size, 1em goes from 14px to maybe 28px, so the screen width in em’s has altered, therefore the em based media query kicks in and changes the menu bar for the button.

4 Likes

Got it! Thanks!

So does that mean you should always use em’s in media queries?

Seems to me that they only help in certain cases like she described.

I’ve never considered it until reading that, I have always used pixels, though I see the point behind using em now. I wouldn’t think it was an always thing, but maybe if accessibility is important.
I have not known about the idea for long enough to consider all the implications of this method. For example, it does not make much sense for more graphical (non text) elements.

1 Like

I believe that was because of a webkit bug and if you look at the following code the media query kicks in at the same time regardless of em or px media queries when you zoom.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
	-webkit-box-sizing:-moz-border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
ul {
	margin:0 auto;
	padding:0;
	list-style:none;
	max-width:600px;
	background:#f9f9f9;
	overflow:hidden
}
li {
	float:left;
	width:100px;
	border:1px solid #fff;
	background:blue;
	color:yellow;
	text-align:center;
}
/* change to 37.5em (37.5 x 16 = 600) to see no difference with zoom */
@media screen and (max-width:600px){
	li{display:block;float:none;width:auto;}	
}
</style>
</head>

<body>
<ul>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
</ul>
</body>
</html>

The media query kicks in at the same time regardless of px or em usage.

Most pages have a max-width in px because setting a max-width in ems could mean that the page is ten miles wide if the user has massive fonts and that would be stupid. Therefore this means that using ems for media queries would be flawed anyway because the wrapper is in px.

I feel that px for media queries is still the best choice and will provide better results most of the time.

If you see AlastairC’s reply he mentions this bug in relation to that article and also recommends sticking to pixels for media queries.

4 Likes

Pleased to see pixels are still the best option. But it has got me thinking now about how a site looks when the fonts are zoomed.

Surely that depends on how well the overall structure will cater to the increased fonts? Nothing should really break from some font increasing, I would think. If it does, I think that’s a sign of your page being flawed, not the specific px media queries.

After already taking you word for it, I just tried your code above (in Firefox). Yes, the media query does kick in at 600px regardless of px or em, but with px it does not kick in when you increase font size. It does with em.

Unless I am misunderstanding it seems to kick in at the same point when you zoom (unless you are choosing to only zoom text size in Firefox which is a separate issue).

Where do you see the issue?

That’s it.

I think I get it now. Zoom is not something I generally use so was a bit unfamiliar with it. I though when people can’t read stuff the blow the fonts up.
I see how the normal zoom works now, I thought it just blew the whole thing up as is, but when zoomed right in, the media query does kick in and it looks like a blown up mobile view on the full size monitor.
So I suppose em queries are only needed if people zoom font only. That does make sense for things like menu bars, but like I said before, not for images, like swapping backgrounds and suchlike. So you would end up making different queries for different types of elements if you were to go down that route.