0

Fluids レイアウトとサイズ変更可能なテキスト Web ページのスタイルを設定するときは、関連するフォント サイズ (em の単位) と、現在スタイル設定されている要素のブロック幅 (パーセント単位) を常に念頭に置いておく必要があります。親要素の幅がどれであるか、または現在の要素またはその祖先のいずれかの font-size を変更した場合に、常に注意を払う必要があるのは時間の余裕です。

Dynamic Stylesheets (Sass または Less など) を使用すると、em およびパーセント計算 (単純な除算) の背後にある数学を処理する mixin または関数を簡単に実装できるため、サイズをピクセル単位で記述して変換を忘れることができますが、とにかく私の知る限り、それらを自動検出する方法がないため、関連するフォントサイズと含まれるブロック幅を提供します。

それを自動化するユーティリティのクラスがあるかどうか知っていますか? 何らかの方法でそれを達成するために何らかの努力がなされましたか?

4

1 に答える 1

1

親の計算されたプロパティ値を使用して、CSS で子のプロパティを設定することはできません。LESS または SASS はそれを変更しません。ただし、サイズは親 (または rem 単位を使用する場合はルート) に対して相対的に設定できます。

>No, I'm talking about styling any vertical space (line-height, padding-top, padding->bottom) in em units (so relative to relevant font size)

関連するフォント サイズは、親の設定されたフォント サイズです。子要素のフォント サイズを 0.5em と定義すると、そのフォント サイズは親のフォント サイズより 50% 小さくなります。

Less / SASS を使用して、たとえば 0.5em を変数として宣言できます。これにより、単一の場所で変更および編集できます。

以下

@basefont: 1em;
@smallfont: 0.5em;

section {
font-size: @basefont;
article {
font-size: @smallfont; // or @basefont / 2;
}
}

footer {
font-size: @smallfont;
}

および任意の水平スペース (幅、左ページング、右パディング) はパーセント単位で表されます (つまり、含まれるブロックの幅に対して相対的です)。

パーセント単位はすでに親 (ブロックを含む) に対して相対的です。

于 2014-10-21T21:59:59.793 に答える