5

フォントサイズがPXユニットではなくEMユニットで指定されている場合、保守可能なCSSコードを記述できません。私は次のようなCSSコードを書くことに慣れています。

body {font-size: 12px;}
body .sidebar {font-size:11px;}
body .sidebar .loadmore {font-size:10px;}
body .sidebar .warning {font-size:13px;}

アイデアは、サイト全体の多くのページに、12ピクセルのフォントサイズである必要があるテキストがたくさんあるということです。特異性のルールを利用して、サイトの特別な領域で12pxのフォントサイズを上書きします。

上記のコードを次のように書き直したとしましょう。

body {font-size: 12em;}
body .sidebar {font-size:11em;}
body .sidebar .loadmore {font-size:10em;}
body .sidebar .warning {font-size:13em;}

上記のコードでpxをemに置き換えた場合、特定のルールの利点が失われることを理解しています。コードの3行目は、「10 em of 11 em of 12 em」と解釈されます。これは、「以前のすべてのルールをオーバーライドして、10 em of（デフォルトは何ですか？）」とはまったく同じ意味ではありません。私が言ったことは正しいですか？

編集私が言ったことが正しければ、「すべての要素にフォントサイズXを使用し、サイドバーにはフォントサイズYを使用する」などのフォントサイズルールをどのように記述しますか？

4

3 に答える 3

6

ジョンあなたが話している特異性はあなたが述べた方法で起こります。理由に関するリファレンス：http：//kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/。

編集編集への返信として、jnylenが元の投稿のコメントに投稿した内容を考慮してください。

body {font-size：12em;}にリストしたフォントサイズ12 emは、デフォルトのフォントサイズを現在のサイズの12倍に拡大縮小します。emを使用したい場合は、それらを使用したいスケールレートを検討し、計算を行う必要があります。ネストされたステートメントで固定サイズを設定する場合は、固定属性（ピクセル）に固執する必要があります。私がリンクした記事で述べたemの利点は、デフォルトのサイズ、たとえば12ピクセルを設定し、emを使用してそれらをスケーリングできることです。たとえば、モバイルベースのWebサイト。

于 2012-04-03T21:58:16.297 に答える
2

はい、em適用する要素がネストされている場合、値は「乗算」されます。これは必ずしも特異性の問題ではありません。ルールを個別に指定した場合.loadmore、が含まれている.sidebarため、同じ問題が発生します。.sidebar.loadmore

これを操作する方法の例を次に示します：http： //jsfiddle.net/PJWrW/

私は通常px、フォントサイズにまたはパーセント単位を使用して、絶対フォントサイズを設定していること、または親フォントサイズを変更していることを明示します。

単位は基本的に現在のフォントサイズでの文字の幅であるemため、パディングや幅などの寸法を定義するために単位を使用することがあります。em

于 2012-04-03T21:57:46.147 に答える
0

私の知る限り、フォントサイズにemを使用している場合、一部の要素の特定のサイズを設定しながら、左側のサイドバー（またはその他の場所）の要素に標準のフォントサイズを設定する方法はありません。そのサイドバーで。emを使用する場合は、そのサイドバーのすべての要素のサイズを指定する必要があります。

個人的には、投稿で言うように特定の要素に標準のフォントサイズを設定できるという理由だけで、通常、フォントのサイズ設定にpxを使用します。

em over pxを使用することについて私が聞いた唯一の説得力のある議論は、もはや実際には問題ではないスケーリングの問題に関するものです（IE6では、pxを使用する場合、フォントサイズを手動で変更することはできませんが、ほとんどの人はしばらく前にIE6のハッキングをやめました） emを利点として使用していることがわかる実際の状況は、ユーザーがここのようにJavaScriptを介してフォントサイズを変更できる機能を実装する場合のみです。

于 2012-04-03T22:40:26.647 に答える