css - 如何以适当的方式更改 bootstrap 排版测量？

Question

目前 Bootstrap 3 使用 html {font-size: 62.5%;} 然后

body {

  font-size: 14px;
  line-height: 1.42857143;

}

而且排版比 px 无处不在

h1,
.h1 {
  font-size: 36px;
}
h2,
.h2 {
  font-size: 30px;
}
h3,
.h3 {
  font-size: 24px;
}
h4,
.h4 {
  font-size: 18px;
}
h5,
.h5 {
  font-size: 14px;
}
h6,
.h6 {
  font-size: 12px;
}

在当前情况下，如果我想将默认的 font-size 设置为 16px，我是否也应该增加所有标题级别的 px 大小将 36 更改为 38 for h1 并更改 line-height 为 1.42857143 for 14px 字体大小

或者我可以将 html {font-size: 62.5%;} 更改为其他内容，而无需对 body 进行编辑，< strong>标题和行高

Answer 1

只是尝试快速测试似乎可以揭示答案:

Example with: html {font-size: 62.5%;}
Example with: html {font-size: 100%;}

这两个示例看起来完全一样，因为字体大小设置为非相对单位，例如 px , 不会受到父元素字体大小更改的影响。

如果您想拥有这种功能，请尝试使用 em ，像这样:

Example with body{font-size: 62.5%;}
<强> Example with body{font-size: 100%;}

CSS 使用 em 单位:

body {
    font-size: 62.5%;
}
h1, .h1 {
    font-size: 3.6em; /* equal to 36px */
}
h2, .h2 {
    font-size: 3.0em; /* equal to 30px */
}
h3, .h3 {
    font-size: 2.4em; /* equal to 24px */
}
h4, .h4 {
    font-size: 1.8em; /* equal to 18px */
}
h5, .h5 {
    font-size: 1.4em; /* equal to 14px */
}
h6, .h6 {
    font-size: 1.2em; /* equal to 12px */
}

可靠来源:

The most popular method in working with em values is to set the font-size on the body to 62.5%. Because the default browser font-size is 16px, this makes it 10px (without hard-setting it to 10px, which wouldn't cascade). Using 10 as a multiplier is much easier than using 16. This way, you need a font size of 18px? Use font-size: 1.8em.

So why both with all this em business when it's just an abstraction of using pixel values anyway? Three possible reasons:

1. They ARE resizable in IE 6
2. The relationship to other sizes (elastic width sites)
3. Em's cascade like a mo-fo

摘自: px – em – % – pt – keyword
Published April 16, 2009 by Chris Coyier

我猜这个方法可能是 html{font-size: 62.5%;} 的来源在您的代码中找到。