2

次の CSS を使用します。

* {
    margin: 0;
    padding: 0;
    font-family:"Segoe UI";
    font-variant: small-caps;
}
.red {
    color: hsl(0, 100%, 50%);
    font-size: 3em;
}
.orange {
    color: hsl(30, 100%, 50%);
    font-size: 3em;
}
.yellow {
    color: hsl(60, 100%, 50%);
    font-size: 3em;
}
.green {
    color: hsl(120, 100%, 50%);
    font-size: 3em;
}
.blue {
    color: hsl(210, 100%, 50%);
    font-size: 3em;
}
.indigo {
    color: hsl(230, 100%, 50%);
    font-size: 3em;
}
.violet {
    color: hsl(274, 100%, 50%);
    font-size: 3em;
}

... * セレクターの属性は正常に機能します。これらはすべてのクラスに適用されます。ただし、font-size をそこに移動すると、テキストはティラノサウルスのような比率になります。これは、フォントサイズを個々のクラスから * クラスに移動することで確認できます: http://jsfiddle.net/NvTvr/8/

なぜこれが起こるのですか？

アップデート

したがって、これが進むべき道です。

* {
    margin: 0;
    padding: 0;
    font-family:"Segoe UI";
    font-variant: small-caps;
    font-size: 48px;
}
.red {
    color: hsl(0, 100%, 50%);
}

...等。(カラークラス内でフォントサイズが指定されていません); http://jsfiddle.net/NvTvr/10/に見られるように

4

4 に答える 4

4

em文脈に関連しているからです。

コンテキストから継承されるようfont-sizeに、 を持つ各子孫要素は、テキスト コンテンツを含む要素までem font-size現在を乗算します。font-size

仮定して、実際に見てみましょう：

* { font-size: 3em }

それを（コンテキストに関連して）すべての要素font-sizeに適用しています。

つまり、html要素はデフォルトのブラウザの font-size の 3 倍になります。はbodyコンテナの 3 倍の font-size ( html) になり、デフォルトの font-size の 9 倍に相当します。各要素の祖先についても同様です。

remルートに関連するこの問題のない新しいユニットがあります。しかし、これは広くサポートされていません (IE<=8 はサポートされていません)。

回答のこのセクションのemx pxxの議論については、少し話題から外れています。rem

この答えを引用：

em何かのサイズを現在のフォント サイズに依存させたい場合に使用します。

最新のブラウザーはpx、ユニットを問題なくスケーリングできます。古いIEが優勢で、ズーム時にフォントサイズをemスケーリングしなかったときに主に使用されました。px

それでも、emそれはウェブデザインで使用されています. たとえば、テキストのフォント サイズに比例して拡大縮小する必要がある CSS アイコンを作成する場合などです。しかし、全体的なレイアウトについては、複雑な問題や頭痛の種、または流動的なレイアウトを作成する際のパーセンテージを生成しないrem/を使用します。px

pxfor font-sizeの問題は、ページのテキストの全体的なサイズを変更する必要がある場合、font-sizeを使用するすべての宣言を変更する必要があることpxです。そこでrem助けに来ます。

にどのユニットを使用するかについては、常に激しい議論がありfont-sizeます。頭痛の種が少なく、プロジェクトに十分なものを使用してください。

つまり、個人の好みとプロジェクトの要件によって異なります。

参考文献:

定義と説明

その他のディスカッション

于 2013-05-31T23:07:23.890 に答える
1

これは、"*" セレクターを使用すると font-size:3em が ".red"、".green" などの親(この場合は body ) にも適用されるためです。em は複合単位であるため、フォント サイズを宣言する方法で、font-size:3em を本文に適用し (16px ブラウザーのデフォルトを想定すると 48px)、次に font-size:3em をクラスに適用します。これは、フォント サイズが 144px になることを意味します。

私の説明が理にかなっていることを願っています。

于 2013-05-31T23:30:40.520 に答える
0

Jukka の明示的および暗示的な提案のおかげで、CSS は次のようになりました。

* {
    margin: 0;
    padding: 0;
    /*font-family: Consolas;*/
    /*font-family: Candara;/*
    /*font-family: Calibri;*/
    font-family:"Segoe UI";
    font-variant: small-caps;
}
body { font-size: 3em }
.red { color: hsl(0, 100%, 50%); }
.orange { color: hsl(30, 100%, 50%); }
.yellow { color: hsl(60, 100%, 50%); }
.green { color: hsl(120, 100%, 50%); }
.blue { color: hsl(210, 100%, 50%); }
.indigo { color: hsl(230, 100%, 50%); }
.violet { color: hsl(274, 100%, 50%); }

更新jsfiddleはhttp://jsfiddle.net/NvTvr/11/です

  • ただし、jsfiddle で TidyUp を選択すると、1 行のクラスと要素の宣言が垂直方向に展開されます (属性が 1 つしか設定されていない場合は、すべてを 1 行にまとめるという考えが気に入っています)。
于 2013-06-01T13:18:58.343 に答える