Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Why would you need to do this? If you just change the html font size (using 80% for example) then all REM units will follow on from that?
And what is —scale for?
I agree 100% with the message of the post, CSS vars in media queries is a great way to minimise repetition, I am just a little confused by the examples! 🤣
Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
So purely for font sizes / measurements the REM unit is based on the font size set at the root of the document (not :root I mean the html element).
So if you set the font size on the html element it will adjust all font sizes using rem units accordingly.
2.5rem is just saying 2.5 times the font size set on the html element.
We use percentages as then if a user sets the browser size to extra large 1.5 times it takes that into account. (So in the example you would get a base font size of 1.2 (80% of 1.5) and your heading using 2.5REM would now be 3 times effectively (1.2 *2.5)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Why would you need to do this? If you just change the
htmlfont size (using 80% for example) then all REM units will follow on from that?And what is
—scalefor?I agree 100% with the message of the post, CSS vars in media queries is a great way to minimise repetition, I am just a little confused by the examples! 🤣
So purely for font sizes / measurements the REM unit is based on the font size set at the root of the document (not
:rootI mean the html element).So if you set the font size on the html element it will adjust all font sizes using
remunits accordingly.2.5rem is just saying 2.5 times the font size set on the html element.
We use percentages as then if a user sets the browser size to extra large 1.5 times it takes that into account. (So in the example you would get a base font size of 1.2 (80% of 1.5) and your heading using 2.5REM would now be 3 times effectively (1.2 *2.5)