ユーザーエクスペリエンスを最優先し、フォントサイズは px を放棄し、em_Experience 交換を選択します。-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

ユーザーエクスペリエンスを最優先し、フォントサイズは px を放棄し、em_Experience 交換を選択します。

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:06 PM

em px

ユーザビリティデザインやユーザーエクスペリエンスデザインが提唱されるインターネット時代においては、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 サイトがユーザーエクスペリエンスデザインに一歩近づくことができます。これは、ユーザビリティデザインやユーザーエクスペリエンスデザインが提唱される今日のインターネット時代において非常に重要です。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。