ホームページ > 記事 > ウェブフロントエンド > ユーザー エクスペリエンスを最優先し、フォント サイズは px を放棄し、em_Experience 交換を選択します。
ユーザー エクスペリエンスを最優先し、フォント サイズは px を放棄し、em_Experience 交換を選択します。
- WBOYオリジナル
- 2016-05-16 12:06:241531ブラウズ
ユーザビリティデザインやユーザーエクスペリエンスデザインが提唱されるインターネット時代においては、CSSもそれに参加する必要があります。 CSS コードを記述するときに、最初に全体のフォント サイズを定義する人がほとんどですが、中国語の場合は通常 12px ですが、実際には、IE のトップ メニューにある [表示テキスト サイズ] 設定は効果がありません。フォント サイズが小さすぎると感じる視聴者にとって、これは間違いなく非常に悪いユーザー エクスペリエンスです。実際、これらすべては回避できます。つまり、em 単位をフォント表示単位として使用します。
ブラウザのデフォルトのフォント高さは 16 ピクセルであるため、調整されていないブラウザでは 1em=16 ピクセルが表示されます。変換すると 1px=0.0625em、つまり 12px=0.75em、10px=0.625em ということになり、1px=0.0625em を介して CSS を書くときに px を em に変換することができます。しかし、もっと便利な方法がありますので、読み続けてください。
このメソッドでは、% 単位を (1 回だけ) 使用する必要があります。実際、% と em は、前者には後者よりもゼロが 2 つ多いだけであるため、単純に理解できます。 font-size の変換を簡略化するために、CSS の本文で font-size=62.5% をグローバルに宣言できます。ここでの % アルゴリズムは em と同じで、100%=16px、1px=6.25%、10px=62.5 です。 %. つまり、デフォルトのフォント サイズは 10px に定義されています。多くの初心者は、ここで 0.625em を定義するか、12px を直接定義するかもしれませんが、これは効果がありません。font-size=62.5% を定義する必要があります。 emは親の裁ち落とし要素のフォントサイズ1em=10pxを継承する特性があるので、12px=1.2emとなります。 pxとemの変換は10で取得できるのでとても便利です！
あと、一つ注意が必要ですが、IEが漢字を処理する場合、浮動小数点値の精度に限界がある可能性があります、本文下の62.5%に表示される12pxフォントはちょっと直接定義した値よりも大きくなりますが、62.5% を 63% に変更するだけです。上記の CSS コードの調整により、Web サイトがユーザー エクスペリエンス デザインに一歩近づくことができます。これは、ユーザビリティ デザインやユーザー エクスペリエンス デザインが提唱される今日のインターネット時代において非常に重要です。