[Solved] EMs for media queries and layout
# May 17, 2013 at 4:40 am
This sums up the whole EM in MQ thing: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/# May 17, 2013 at 1:42 pm
This reply has been reported for inappropriate content.
It is a Chrome Extension that shows you information about the media query breakpoints used on a page. A nifty little feature it has is it will tell you both the PX and EM value, which is useful for converting PX values to the correct EM ones. It also does a bunch of other useful things too.# May 19, 2013 at 12:11 am
@Gareth I think this might be a good read for you: http://webdesign.tutsplus.com/articles/typography-articles/taking-the-erm-out-of-ems/.# May 20, 2013 at 2:28 am
Y’know – this is what I love about the web at the moment – you lift one rock and there’s a whole playground of new stuff you never knew existed. For eg just discovered this: http://clagnut.com/blog/348/ – WHO KNEW!? Well, everybody except me i guess! o_O
Thanks for those links guys – made for some really good reading.
I’m gonna have a play with REMs. The browser landscape here in South Africa is interesting as there is a greater need to support IE8 and below so fallbacks are going to be _really_ important if I go that route.
@scottnix: that’s an interesting position you’re taking there – would you elaborate? This REM thing looks like a really good idea – why the vehement opposition?# May 20, 2013 at 1:05 pm
My beef with REM’s is based on “I don’t have problems with EM inheritance issues the way I code”, I don’t like having to duplicate lines of CSS to have a fallback to a problem I don’t have.
That said, it was pretty self gratifying to see this Tweet by Brad Frost a few days ago.
“Late night converting rems back to ems. I tried, but the compatibility just isn’t there, and the fallbacks aren’t ideal.”# September 17, 2013 at 8:16 am
No need to use rem’s for media queries – the value em’s obtain is that of the user agent, and not from your styles: http://www.stephanmuller.nl/ems-relative-media-queries/
I’ve used em’s with the assumption that 1em ~= 16px in media queries for a while now. I discovered this after being baffled as to why my breakdpoints weren’t working, and eventually discovering that no matter what I had set my base font size to, media queries were consistently being calculated at +-16x the value of the em in the media query.
Don’t worry about fallbacks – just use em’s for media queries, and use rems as you’d want everywhere else.
You must be logged in to reply to this topic.