Px vs. Em vs. Rem

Hi all,

So under what circumstances is it generally acceptable to use these units? And how do they affect responsiveness (change in screen size, or different browser)?

Here’s a good article on the difference.

  • Essentially, pixels are units, the size of which is determined not by the size of the screen, but the quality.
  • rems are a way of setting the size of an element based on the font size of the root HTML page, which can make your website better for responsiveness.
  • ems are similar to rems, except instead of being relative to the root HTML, they are relative to the direct parent of the element you are styling.

I’ve simplified it a lot; I would highly recommend reading the article for more detail.