Skip to main content

Forums

This topic contains 13 replies, has 10 voices, and was last updated by  Larry 6 years, 1 month ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #44839

    Gareth
    Member

    Hey guys,

    I’m busy putting a new responsive site together and I’ve heard a lot of talk about shifting to EMs for media queries and layout.

    Can anybody give me a “Top 10” list of why this is a good/bad idea and any gotchas to look out for?

    Shot!

    Gareth

    #135396

    iknowdavehouse
    Participant

    Main benefit is the the em relationship between text size and breakpoints. If you zoom your browser in to increase the text size the breakpoints will move with it keeping the breakpoint decisions you initially made still relevant.

    #135398

    Hugo Giraudel
    Participant
    #135460

    scottnix
    Participant

    This reply has been reported for inappropriate content.

    This may also be helpful https://chrome.google.com/webstore/detail/responsive-inspector/memcdolmmnmnleeiodllgpibdjlkbpim?hl=en

    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.

    #135464

    AWKM
    Member

    Better off using REMs

    #135472

    CrocoDillon
    Participant

    For media queries em means the default font-size, unaffected by styling. So there would be no difference between em and rem (if rem even works).

    #135504

    scottnix
    Participant

    Never tried REM in a media query, it does work. However I am boycotting REM’s, not to mention I haven’t seen anyone else do it in media queries. ;x

    #135509

    cwork
    Participant

    This reply has been reported for inappropriate content.

    boycotting rems? interesting :)

    @hugogiraudel and @scottnix, thanks for sharing those links

    #135565

    AWKM
    Member

    Why would you not use REMs?

    Support is good and they are easier to work with compared to EMs

    #135583

    srikarg
    Participant
    #135669

    Gareth
    Member

    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?

    #135593

    scottnix
    Participant

    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.

    https://twitter.com/brad_frost/status/335259353466691584

    “Late night converting rems back to ems. I tried, but the compatibility just isn’t there, and the fallbacks aren’t ideal.”

    #135758

    ChrisP
    Participant

    > “Late night converting rems back to ems. I tried, but the compatibility just isn’t there, and the fallbacks aren’t ideal.”

    That’s discouraging..I’m half way through the first site I chose to use rem’s over em’s.

    #150307

    Larry
    Participant

    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.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star