When to choose REM over PX?

Asked 22/8, 2017 at 16:0 Answered 6/12, 2023 at 14:49

When should I use rem over px? I see a lot of articles saying that I should use REM to respect the user preferences, but the examples always says about font size, not the about the whole style - margin, padding, border, width, height, etc. Took this article of SO as example: Should I use px or rem value units in my CSS?

ALL the answers are saying about the font-size, ok, I get it, rem is better for font-size, but what about the other styles? I see that bootstrap uses px to the container class, to the col-* class, is there a reason for that?

I'm creating this site that overwrites the default styles of Bootstrap, should I overwrite the places where it uses px with pxs or should I use rem?

Thank you.

Differentia answered 22/8, 2017 at 16:0 Comment(1)

"I'm creating this site that overwrites the default styles of Bootstrap, should I overwrite the places where it uses px with pxs or should I use rem?" For this case at the very least, I think the answer is clear - don't mix units. If you're overriding elements with px, keep using px so you don't get confused. – Nictitate 22/8, 2017 at 16:2

Before you go into what unit of css you should use. You must have a understanding of the units themselves. Because you are the only one who knows what styling you want for your site e.g. (static, dynamic/responsive). Only you can decide which unit to use. So in order to make the decision, first learn about the types of css units and their advantages. Here is the w3school link explaining all units like em, rem etc.

https://www.w3schools.com/cssref/css_units.asp

Now coming to your point specifically, rem as defined is the font-size set for the root element that is <html>. By default the font-size of the <html> root element is 100% which equals to 16px as set by the browser. It can be changed in the browser setting or you can override it in css with html {font-size: 20px}. Whatever the font-size set of the html tag will equal to 1rem.

Now, You can use rem for padding and margin etc but it is not recommended because e.g. you have set the rem values of padding and margins and widths etc for your site where your browser default font-size is set to 16px. So it all looks well and adjusted but what if a user who is browsing your site has set their default font-size of the browser to 25px. That will break your site's design. So that is why for responsive sites, the units %, vw/vh are mostly used. As for the px unit. They are their to help set static values so that you fix the size rather than have it readjust.

So now you know what size you want to keep your website's. You can use the units as needed.

Hope this helps you in your understanding and again, try understanding the theory itself before taking in opinions of others on that theory. :) Happy coding.

Tripersonal answered 22/8, 2017 at 16:19 Comment(2)

what if a user who is browsing your site has set his default font-size of the browser to 25px. That will break your site's design Why? If so only the font-size is enlarged by 25/16=156%, but not margin and padding, would this break the site design? – Bearcat 13/6, 2020 at 9:18

It shouldn't. Because if you change it from 16px to 10px , .5rem would still convert from 8 to 5. You may see some "shrinkage" but everything would still be "relative" – Tot 27/9, 2021 at 20:12

-2

Rem units are auto adjusted to screen width, it have lots of other advantages to it, you can check those advantages in pxcoding.com/convert-px-to-rem/ and convert all px to rem values in css file

Cutaneous answered 6/12, 2023 at 14:49 Comment(2)

rem has nothing to do with screen width – Multiplechoice 6/12, 2023 at 14:59

This does not answer the user's question of how to determine whether REM or PX are a better solution for a particular project – Villus 7/12, 2023 at 19:38

Recommended topics

Hot tags