Px vs Ems vs Rems vs Percents vs *explodes*

7 years ago from Matt Felten, Design System Lead at YouCaring

  • Dave GreenDave Green, 7 years ago (edited 7 years ago )

    I'm currently building a personal site as I'm a front-end developer and I want to advertise what I do.

    It's a fully responsive design, so I'm using REM units for font size, margin, padding and widths. I use EM units for line-height, and then a sprinkling of percentages for things like padding on my outer containers etc.

    Using REMs for most things just makes the responsive side SO much easier: the entire design just scales beautifully. :)

    I'd say 90% of my SASS contains REM units. It's just the way forward. To cater for older versions of IE, you could manually enter pixel fallbacks (SASS can help here) or use something like: https://github.com/chuckcarpenter/REM-unit-polyfill

    Hope this helps!

    Cheers, Dave

    2 points
    • Matt FeltenMatt Felten, 7 years ago

      I haven't seen that polyfill before. Thanks Dave!

      0 points
      • Dave GreenDave Green, 7 years ago

        It's really, really useful. I maintain a boilerplate for my employer and we've had to bake in a lot of legacy browser (read: IE) support so it's very helpful! Glad to help! :)

        0 points