How to set base size for rem

2020-08-09 09:48发布

站内问答 / HTML/CSS
349 2 3

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?

标签： css
举报
2条回答
迷人小祖宗
2楼-- · 2020-08-09 10:00

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.

查看更多
0人赞 添加讨论(0) 举报
forever°为你锁心
3楼-- · 2020-08-09 10:15

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)