我在我的项目中使用bootstrap 3，我发现bootstrap中有2个font-size声明，如下所示：
Scaffolding.less
html { font-size:10px;}
body{ font-size : @font-base-size; }
@ font-base-size在variables.less
中定义为14px我一直在阅读以下内容，其中一种具有响应字体大小的方法是将基本字体大小设置为在body或html中定义的px，然后在 rem 中使用字体大小来处理正文中的不同组件，例如p，h1等。
但我不确定，我在哪里定义基本字体，是否应该在html或body中？
为什么bootstrap在html和body中有不同的字体大小？
我的观察： 当我在html中用px定义一些字体大小时，只有rem的东西适用于所有东西，定义字体大小为体内的px不适用于rem。
答案 0 :(得分：2)
rem单位相对于根或html元素。
因此，定义基本字体大小应该在html元素上进行。
在font-size上定义body会有效，但所有使用font-size单位定义rem的子元素都将回退到根/ {{1元素来计算它们的绝对大小。
所以：
html至于为什么Bootstrap使用2种字体大小：html {
font-size: 10px;
}
body {
font-size: 15px;
}
.parent {
/* font-size will be 15px here */
}
.parent .child {
font-size: 1.2rem; /* resolved to 12px */
}
元素上的10px字体大小只是他们使用的一些全局重置的一部分。此外，一些边距/填充是使用基本字体大小计算的，因此最好不要过多地干扰它。
答案 1 :(得分：1)
如果您没有在页面上的任何位置设置字体大小，则它是浏览器默认值，可能是16px.因此，默认情况下为1rem = 16px和2rem = 32px。如果您在body元素上设置20px的字体大小，那么1rem = 20px和2rem = 40px.
此外，em，rem不是绝对单位 - 它是相对于当前所选字体大小的单位。除非您通过使用绝对单位（例如px或pt）设置字体大小来覆盖字体样式，否则这将受到用户浏览器或操作系统中字体选择的影响一，所以将em用作长度的一般单位是没有意义的，除非你特别希望它随着字体大小的扩展而缩放。
注意：评论太长了。对不起