在特定样式表中以相对单位指定字体大小答案

【问题标题】：Specifying font-size in relative units in particular style sheet在特定样式表中以相对单位指定字体大小
【发布时间】：2015-03-12 15:01:49
【问题描述】：

我想在 Drupal responsive 主题的 CSS style sheet 中以相对单位 (em) 设置字体大小。我知道，最好使用相对字体大小单位：在我的情况下，它相对于body font-size (13px)：但我不确定，这个值是否必须保留在 px 绝对单位中？如果我以相对单位 (em) 指定 body font-size，那么我不能为所有其他元素使用em相对单位，因为设置相对于相对单位的单位没有意义。在这个特定的样式表中指定字体大小的正确方法是什么？ CSS（与问题相关的部分）如下所示：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
...
body {
  font-family: 'Open Sans', sans-serif;
  line-height: 160%;
  color: #666;
  font-size:13px;
  background: #fff;
}
....
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin-bottom:6px;
  color: #555;
}

h1 {  font-size:18px; }

h2 {  font-size:16px; }

h3 {  font-size:14px; }

h4 {  font-size:13px; }

h5 {  font-size:13px; }

h6 { font-size:13px; }

p {  margin-bottom:18px;
    color: #666;
}
...
#forum .name a{ 
  font-size: 16px;
}
....

【问题讨论】：

您正在询问修改特定样式表，但问题不包括它。问题描述的重要部分只能通过外部链接获得的问题不适合 SO。此外，是的问题是什么？要求“正确的方式”是非常模糊的（并且是以意见为导向的）。并且将单位设置为相对于相对单位很有意义，因此关键假设是错误的。
我想以 em 为单位设置字体大小。所以我应该以像素为单位保留正文字体大小，并为所有其他元素设置 em 中的字体值。如果我也在 em 中设置 body font-size，这可能不会给我任何优势。如何将像素单位转换为 em，同时保留纵横比/比例？

标签： html css fonts responsive-design

【解决方案1】：

这完全取决于您要达到的目标。使用像素 (px) 或点 (pt) 等绝对单位并没有错强>。就像你写的一样。如果您希望所有样式都取决于正文字体大小，您可能应该使用 em。这样，通过更改正文字体大小，它会影响其他元素，这很好，因为您不必编辑所有样式。这将更有效率并加快您的工作。

示例：http://jsfiddle.net/su4tzvn9/

body {
    font-size:13px;
}

h1 {
    font-size:2em;
}

p {
    font-size:1.2em;
}

【讨论】：

我对现有样式表没有任何问题，只是想稍微改进一下 CSS，让它稍微好一点，遵循推荐的使用相对单位字体大小的方法。
像素，如果你想要绝对控制或者你需要一个“像素完美”的结果。对于 em 单位，字体大小是相对于容器字体大小的，而对于 rem 单位，字体大小是相对于根元素字体大小的。相对单位，通常在字体大小需要根据屏幕大小改变时使用。它提供了更容易的操作和更少的媒体查询使用。例如： html {font-size: 16px} div{ font-size: 1rem } //这等于 16px。有一篇很棒的文章你可以在这里阅读kolosek.com/css-relative-font-size了解详情。

【解决方案2】：

您可以使用以像素为单位的基本字体大小，对于其他元素，使用百分比。因此，body 的每个子代的字体大小将是为 body 指定的字体大小的百分比。所以，如果你有这样的 html 和 css： `

body
{
 font-size:10px;
}
body div:first-child
{
 font-size:110%;
}
body div:last-child
{
 font-size:150%;
}
<body>
  <div>Sample text1</div>
  <div>Sample text2</div>
</body>

然后sample text1 的字体大小为 11 像素，而sample text2 的字体大小为 15 像素。在响应式设计的情况下，您可以更改每个divs 甚至正文的字体大小（百分比）（比如说，对于移动设备，您将正文字体设置为 12 像素，对于更高的分辨率，您将其设置为 14 像素），那么您的文本将在不同的设备上相应地调整大小！

【讨论】：