1

サイズの異なる 2 行のテキストを揃えようとしていることがよくあります。基本的には、文字の大きさが違っても行の高さが変わらないようにしています。sを特定の要素のサイズを参照するemなどの単位として使用する場合、これは注意が必要です。サイズインは簡単ですが、レスポンシブにデザインしようとすると別の問題が生じます。line-heightemline-heightpx

BIG TEXT次の例では、左側の が200% など<h1>のより大きな相対値を持つように設定された またはであり、が wi​​th のように小さいものであると仮定します。font-sizesmall textfont-size:150%

悪い：

______________________       _______________________

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

(2 x 200% ems は 2 x 150% ems と同じではないため、これは機能しません)

GOOD (ただし、応答しない)

______________________       _______________________


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

font-sizeCSSで親のフォントサイズを参照することはできません(設定時を除く)。ただし、関連するすべてのスタイル シートを制御できる範囲で、状況を間接的に処理できます。

たとえば、 "big" 要素と "small" 要素の親要素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 に答える