Menu
I have a simple question, where do you declare the base size that rem is calculated from?
<body> <h1>Something</h1> </body> I can see that the font-size is <body> is set to 16px and the <h1> is set to 3rem, yet the font is rendering at 30px when I'd expect 48px. Can any parent redefine the base?
274
The default size is usually 16px on html, however that's not guaranteed, and users can change that default value. A common practice is to manually set the font-size explicitly on html, usually to that 16px value, and then use rems in other places to set the final display value.
rem values are relative to the root html element, not to the parent element. That is, If font-size of the root element is 16px then 1 rem = 16px for all elements. If font-size is not explicitly defined in root element then 1rem will be equal to the default font-size provided by the browser (usually 16px).
1rem inside the media query blocks follows the root definition of font-size of 62.5% of 16px , which is 10px as we found earlier. This behavior is caused by the fact that REM inside media queries always takes the default value of the browser font size, which is often 16px .
rem
Represents the font-size of the root element (typically
<html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).
Source
In other words, change the font size of your html element, and the calculation base for rem will change.
Example:
<html style="font-size: 10px"> ... </html> rem units are based on the font-size of the html element, not the body element. The default size is usually 16px on html, however that's not guaranteed, and users can change that default value. A common practice is to manually set the font-size explicitly on html, usually to that 16px value, and then use rems in other places to set the final display value.
However, that practice has accessibility problems for when users want or need to increase the default font size, so you should design your pages and layouts so that they can adapt to different sizes.
From https://developer.mozilla.org/en-US/docs/Web/CSS/font-size:
rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
