2011-10-14 11 views
0

流体レイアウトとサイズ変更可能なテキストWebページのスタイル設定では、現在のスタイル要素のブロック幅(パーセント単位)と関連するフォントサイズを常に考慮する必要があります。これは、親要素の幅が常に警戒されている必要があるか、または現在の要素またはその祖先のフォントサイズを変更した場合には、時間がかかりません。関連するフォントサイズの検出とブロック幅の包含

Dynamic Stylesheet(Sass以下)は、emとパーセント計算(単純除算)の後ろにある数学に注意を払うミックスインや関数を実装するのが簡単なので、サイズをピクセルで書いて訳を忘れることができます。しかし、とにかく私は知っている限り、それらを自動的にdecectする方法がないので、関連するフォントサイズとcontaningブロック幅を提供する必要があります。

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

+0

コンテナの幅に基づいてフォントサイズのスタイルを設定しようとしていますか? – Benxamin

+0

いいえ、私は、em単位(関連するフォントサイズに相対)で任意の垂直スペース(行の高さ、パディングトップ、パディングボトム)をスタイリングすることについて話しています。右)をパーセント単位で(したがって、包含ブロック幅に相対して)計算します。 –

答えて

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を変数として宣言することができます。 1つの場所で変更および編集が可能です。

以下

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

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

footer { 
font-size: @smallfont; 
} 

及び任意の水平空間(包含ブロックの幅に非常に相対>)パーセント単位で(幅、pagging左、パディング右)。

パーセント単位は、すでに親(ブロックを含む)を基準にしています。

+0

Late、but right;) –

関連する問題