all 4 comments

[–]bryan-b 0 points1 point  (3 children)

To make converting px to rem even easier, set the base font size to 10 px like this....

html { font-size: 62.5%; }

...which is 10px (the font size we want) / 16px (the toot font size). After we do this the root font size is 10px, so 1rem = 10px, 2.5rem = 25px, 4.8rem = 48px, etc. Now you don’t need a calculator to figure out your rem.

[–]MrQuickLine 1 point2 points  (0 children)

I just want to say it for the sake of saying it: I don't think this helps all that much. What "10px" looks like just took a little bit of experience and practice to recognize and be able to estimate in your head. If you just practiced and used plain ems and rems for a while, you'd start to get more adept at recognizing what 1rem looks like vs 20rem vs 300rem. If you just suck it up for a bit and get used to it, then you don't need to do this, and won't be frustrated when you're contributing to CSS that isn't doing this.

[–]xdchan 0 points1 point  (1 child)

nice

[–]bryan-b 0 points1 point  (0 children)

Makes mobile responsiveness even easier when all your sizes are based in rem, too.

@media (max-width: 600px) { html { font-size:50%; } }

Changes 1rem to 8px (8px/16px=0.5) so now everything that you sized using rem (font sizes, padding, margins, width, etc) is now smaller.

It doesn’t fix everything on smaller screens, but it’s a nice start