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

Question

我想在 Drupal 中以相对单位 (em) 设置字体大小 responsive theme's CSS style sheet。我知道，最好使用相对字体大小单位：在我的例子中它是相对于 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;
}
....

Answer 1

您可以使用以像素为单位的基本字体大小，对于其他元素，使用百分比。因此，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 的字体大小为 11px，而 sample text2 的字体大小为 15px。在响应式设计的情况下，您可以更改每个 divs 甚至正文的字体大小（以百分比表示）（比方说，对于移动设备，您将正文字体设置为 12px，对于更高分辨率，您将其设置为14px)，那么您的文本将在不同的设备上相应地调整大小！

Answer 2

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

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

body {
    font-size:13px;
}

h1 {
    font-size:2em;
}

p {
    font-size:1.2em;
}

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

Specifying font-size in relative units in particular style sheet

html

css

fonts

responsive-design