1

我经常发现自己试图对齐两条不同大小的文本行。基本上，即使文本大小不同，也试图使行高保持不变。em当使用s 作为单位时，这可能会很棘手，line-height因为它引用了em该特定元素的大小。调整大小很容易，但line-height在px尝试响应式设计时会引入其他问题。

在以下示例中，假设BIG TEXT左侧的 是 an<h1>或设置为具有较大相对值的值，font-size例如 200%，而 thesmall text是较小的值，例如 with font-size:150%。

坏的：

______________________       _______________________

                             small text with 2em lin
BIG TEXT WITH 2em LINE       _______________________
______________________

（这不起作用，因为 2 x 200% ems 与 2 x 150% ems 不同）

好（但没有反应）

______________________       _______________________


BIG TEXT WITH 40px LINE      small text with 40px line 
______________________       _______________________

这是有效的，因为 px 单位不关心文本的大小，但是如果您想通过媒体查询在较小的屏幕上缩小字体大小，这也会带来问题。然后，您还必须管理行高，因为无论文本是否改变大小，前导都将被固定。px此外，在em单位之间投入的大型项目也会让人感到困惑。

有没有更好的方法来解决这个不需要固定px单位的问题？

PS：我将问题表述为em但同样的问题%也发生了，因为它引用了当前元素的大小而不是父元素的大小。

4

3 回答 3

1

CSS3 带来了一个看起来正是你想要的新特性。一个名为rem“root em”的新单元，它代表em文档的根级别，因此它在所有元素中都是相同的。

JSFiddle

HTML

<div class="eg large">Some large text</div>
<div class="eg small">Some large text</div>

CSS

.eg {
    float:left;
}

.large {
    font-size:3em;
    line-height:4rem;
}

.small {
    font-size:1.5em;
    line-height:4rem;
}

CSS-Tricks提出了一种向后兼容的策略（IE8 及以下），基本上只是px在规则之外提供了一个近似值rem规则。

于 2013-03-03T02:40:02.207 回答
-1

似乎您可以定义行高。

.ems-text {
  font-size: 2em;
  line-height: 40px;
}

.px-text {
  font-size: 20px;
  line-height: 40px;
}
于 2013-03-03T02:37:10.450 回答
-2

不能在 CSS 中引用父级的字体大小（设置时除外font-size）。但是，在您控制所有涉及的样式表的范围内，您可以间接处理这种情况。

例如，在“大”和“小”元素的父元素上设置line-height单位em（例如，line-height: 2.4em），并且根本不要在这些元素上设置它，以便它们将继承计算值。例子：

<style>
tr { line-height: 2.4em }
h1 { font-size: 200%; margin: 0}
.small { font-size: 150% }
h1, .small { border: solid 1px }
</style>
<table >
<tr><td><h1>BIG TEXT WITH 2em LINE</h1>
<td><div class=small>small text with 2em lin</div>
</table>

的值2.4em意味着对于h1元素，行高将等于其自身字体大小的 1.2 倍。

请注意，文本的基线不会对齐。这是字体大小不同但行高相等的一个相当直接的结果（这是问题所要求的）。

于 2013-03-03T09:19:06.840 回答