In the Responsive Web Design project ‘personal portfolio’ example, the coder has defined the REM in px (in html selector), then uses REM units from then on:
I thought REM was set by the user or user device. So doesn’t defining it in px defeat the point of REM? Also doesn’t this work out the same as just using px throughout, yet more lines of code and more complicated?
I’m sure there’s a reason, Thanks
The html selector in question:
html {
box-sizing: border-box;
/* Set font size for easy rem calculations
* default document font size = 16px, 1rem = 16px, 100% = 16px
* (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
*/
font-size: 62.5%;
scroll-behavior: smooth;
}
This isn’t defining the size of a rem in pixels per se, it’s defining one as 62.5% of its normal size of 16px (the default on all the major desktop browsers), so 10px. It’s a little bit strange that the style didn’t use absolute pixels to define the root font size, but even if other browsers define a root size other than 16px, they’ll scale everything the same, so it should all work out.
Using an absolute measurement in only one place with all other scales relative to that is the whole point of using rems. In this case, the author’s trying for a metric scale, at 10px per rem. Using an absolute unit like px means that if sizes are changed in one place, they have to be changed everywhere else.
Gahh🤦, thanks yes you’re right it’s actually a percent (the px was just the starting point of calculations in the comments. So even if wrong assumption it doesn’t matter).
And I didn’t realise the default of 16px was so common so understand using that starting point now. (I had some misconception about REM being much more variable depending on device. Now I think about it, it makes sense that font size in px would be roughly the same regardless.)
And yes, now I see the concept of setting in one place and all other references change, in a similar way to using a variable. (I had thought ‘the point’ was my misconception above.)
Thanks