Question

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

这完全取决于你想要达到的目的。使用像素（px）或点等绝对单位没什么不对PT）即可。就像你写的那样。如果你想要你的所有样式取决于正文字体大小，你应该使用em。这样，通过更改正文字体大小，它会影响其他元素，这很棒，因为您不必编辑所有样式。它会更有效率并加快您的工作。

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

body {
    font-size:13px;
}

h1 {
    font-size:2em;
}

p {
    font-size:1.2em;
}

Answer 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的字体大小为11px，而sample text2的字体大小为15px。如果是响应式设计，您可以更改每个divs甚至是身体的字体大小（以百分比表示）（例如，对于移动设备，您可以将正文字体设置为12px，对于更高分辨率，您可以将其设置为14px），然后您的文本将在不同设备上相应调整大小！

在特定样式表中以相对单位指定font-size

2 个答案: