Chalarangelo/30-seconds-of-css

Switch docs CSS units from `rem` to `px`?

atomiks opened this issue · 7 comments

atomiks commented

I've long used rem but when the window is being resized or elements are transitioning in height, it can cause ugly 1px jitters everywhere due to browser rounding prolems. With px, this doesn't occur.

px is also responsive on most browsers when the zoom level is changed.

https://hackernoon.com/rems-and-ems-and-why-you-probably-dont-need-them-664b9ce1e09f

@Chalarangelo

Chalarangelo commented

In general rem and em are a lot better than using px. It's softcoding vs hardcoding. I am strongly against using pure px everywhere. My usual approach is to do the following:

  • Use px at the root element and elements that need to be specifically in px values (border thickness comes to mind usually).
  • Use rem for pretty much everything else, so that the styling is uniform and can be easily changed based on the root element.
  • Use em for things like bold and italics text, which is context-dependent.
  • 👍4
fejes713 commented

I totally agree with @Chalarangelo on that one. I've also read a lot about ems and rems and they're just fine in most cases. I don't think we should change it.

suv27 commented

Hey, I would like to know if you want to change everything from rem to px, I can do this if you still want?

Chalarangelo commented

I think responsive design is very much against hardcoding in px values and that modern browsers take care of this issue well enough. I'm going to close this due to inactivity and based on the expectation that if this hasn't been brought up in a while, it's probably not happening.

skatcat31 commented

https://developer.mozilla.org/en-US/docs/Web/CSS/length

Might shed some light for you guys on how font sizes work

atomiks commented

The reason I've used rem is so everything scales down responsively when I use a root font size of 0.935rem for <768px which fits more content on the screen. But there are rounding problems with rem, see:

That's why I just use px now for everything. Pretty sure it's fine for accessibility because px scales responsively with browser zoom levels / settings

lock commented

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for any follow-up tasks.