CSSのEMユニットの力

キーテイクアウト

CSSでは、EMユニットは、EMが適用される要素の計算されたフォントサイズに等しくなります。 EMユニットがフォントサイズの定義がない子要素で宣言されると、親からフォントサイズ、または別の先祖要素から継承します。
• EMユニットは、コンポーネントレベルのスタイリングやコードのカプセル化セクションなどのモジュラーCSS手法でうまく機能します。コンポーネントの要素がすべて互いに比較的サイズであることを保証し、簡単にサイズを変更できるようにすることができます。
CSSのREMユニットは、計算されたフォントサイズに関係なく、ドキュメントのルート要素上のベースフォントサイズ設定から常にその値を継承します。そのため、REMを使用できますが、これは、その要素のフォントサイズを使用して、ページ上のすべてのコンポーネントを制御する必要があることを意味します。
• emユニットは、ピクセルにわたっていくつかの利点を提供します。それらはスケーラブルです。つまり、ユーザーのデフォルトのブラウザ設定またはデバイスの設定に基づいて調整します。これにより、フォントサイズを増やす必要がある視覚障害のあるユーザーがウェブサイトをよりアクセスしやすくします。 EMユニットは、親要素のフォントサイズに基づいて調整されるため、より柔軟で応答性の高いデザインも可能です。

CSSのすべての複雑な機能を使用すると、機能がどれほど強力であるかを見ると、常にそのターニングポイントがあります。そして、信じられないかもしれませんが、EMSとの私の個人的なターニングポイントは、私が主題のしゃれに満ちた紹介を書いた後もずっと来ました。 その時点ではEMSをかなりよく理解していましたが、サイジング（Web）コンポーネントと呼ばれる媒体に関するSimuraiの投稿を読んだとき、彼らがどれほど強力であるかを本当に見始めました。 だから私はこの投稿で彼のコートセールに乗るつもりです。ここでは、EMユニットの簡単な紹介があり、彼が説明するテクニックのライブデモンストレーションが続きます。

CSSのEMSは何ですか？

CSSでは、EMユニットは、EMが適用される要素の計算されたフォントサイズに等しくなります。 EMユニットがフォントサイズの定義がない子要素で宣言されると、親からフォントサイズ、または別の先祖要素から継承され、おそらくドキュメントのルート要素に戻ることができます。 次のCSSを見てください。

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>}</span>

この場合、この要素またはその子要素（他のフォントサイズの定義がないと仮定）の1EMは、20pxに等しくなります。したがって、行を追加した場合：

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>border-radius: .5em;
</span><span>}</span>

このボーダーラジウス値は.5EMです 10pxに計算します（つまり、20*.5）。同様に：

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>border-radius: .5em;
</span><span>padding: 2em;
</span><span>}</span>

2EMのパディング値は40px（20*2）に相当します。前述のように、このタイプの計算は、任意の子要素にも適用されます。これらの子要素のいずれかが明示的に定義されたフォントサイズ値を持っていない限り、その場合、EM値はそれに基づいて計算されます。 CSSのどこにもフォントサイズが定義されていない場合、EMユニットはドキュメントのブラウザのデフォルトフォントサイズ（通常16px）に等しくなります。 EMSがどのように機能するかを明確にするはずだと思います。ここで、この手法を使用して、Simuraiが元のメディア記事で説明したように、簡単に再構成可能なWebコンポーネントを作成する方法を見てみましょう。これを実行するデモを提供することにより、彼のアイデアをさらに一歩進めます。 いつcss

でEMを使用するか EMユニットは、コンポーネントレベルのスタイリングや一般的なコードのカプセル化セクションなどのモジュラーCSS手法でうまく機能します。たとえば、コンポーネント（カードなど）の要素がすべて互いにサイズがすべてサイズになり、簡単にサイズを変更できるようにするために使用できます。 この手法は基本的に次のように機能します。Simuraiが「Trojan Horse」と呼び、コンポーネントまたはモジュール内のさまざまな要素のベースユニットを作成するように、フォントサイズのプロパティが使用されます。上記のように、EMユニットは親要素のルート定義のフォントサイズに基づいて計算されるため、これにより、親要素のフォントサイズを変更するだけでコンポーネント全体が簡単に再配置できます。 Codepenデモで動作しているこれを見てみましょう：

コンポーネント内のすべてはEMSのサイズがありますが、外側の境界（常に2pxのままにしたい）と画像を除きます。

右上隅にある涙のようなものは擬似要素であり、同様に親のベースフォントサイズから恩恵を受けます。

CSSには、親のフォントサイズを調整する2つのメディアクエリも含まれています。繰り返しますが、これはメディアクエリのすべてのさまざまなサイズを変更する必要がないが、フォントサイズのみを変更する必要がないため、この手法の有用性を示しています。

いくつかのメモ、欠陥など

デモでレンジスライダーを使用することからわかるように、このタイプの柔軟なサイズ変更は、必ずしも使用したいものではありません。やや制限される可能性があります。 EM値の一部を微調整して、それらを好きな方法を取得する必要がある場合があります。デモの親ボーダーの場合のように、すべての要素にサイズの能力を適用したくない場合があります。除外したい要素のEMSを単に避けることで、これを簡単に克服できます。 Simuraiの元の記事に関する議論で説明されているように、Root Font-Sizeを設定するためにPXユニットを使用する必要はありません。そのためにもEMSを使用できますが、これは親から同じ方法で継承されることを覚えておいてください。

レムとサスはどうですか？

CSSのREMユニットは、計算されたフォントサイズに関係なく、ドキュメントのルート要素のベースフォントサイズ設定から常にその値を継承します。 HTMLでは、ルート要素は常にHTML要素です。したがって、REMSを使用できますが、これは、その要素のフォントサイズを使用して、ページ上のすべてのコンポーネントを制御する必要があることを意味します。特定のプロジェクトでは機能する可能性がありますが、この手法は、ドキュメント全体ではなく、孤立したコンポーネントに再サイズ性を集中させるときに最適に機能すると思います。 SASSのようなプリプロセッサを使用することに関しては、それが副点だと思います。最終的に、コンパイルされたStyleSheetは、SASSコードで使用しているユニットを使用し、継承は同じように機能します。

結論

すでに述べたように、Simuraiは、このテクニックをより広く知られていることの功績に値します。もちろん、彼が言及しているように、これは新しいものではなく、基本的な概念は長年にわたって多くの経験豊富な開発者によって使用されてきましたが、Webコンポーネントやモジュールのコンテキストではそれほどではないかもしれません。 Simuraiが言うように、これはCSSフレームワークまたはコンポーネントのライブラリを構築するときに使用するのに最適な方法だと思います。 もちろん、利用可能なCSSユニットはEMだけではありません。 CSSサイジングユニットの概要をご覧ください。

CSSのEMユニットに関するよくある質問（FAQ）

CSSのEMユニットとREMユニットの違いは何ですか？

EMとREMの両方はCSSの相対単位ですが、値を計算する方法が異なります。 EMは、最も近い親のフォントサイズ、または現在の要素に関連しています。これは、要素のフォントサイズを1.2EMに設定すると、親のフォントサイズのサイズの1.2倍になることを意味します。一方、REMはルートまたはHTML要素に対して相対的です。そのため、要素のフォントサイズを1.2レムに設定すると、ルート要素のフォントサイズのサイズの1.2倍になります。これにより、remはemよりも予測可能で制御しやすくなります。

ピクセルをCSSのEMユニットに変換するにはどうすればよいですか？

ピクセルをEMユニットに変換するには、ドキュメントのベースフォントサイズを知る必要があります。ほとんどのブラウザのデフォルトのベースフォントサイズは16pxです。したがって、ピクセル値をEMに変換する場合は、ピクセル値をベースフォントサイズで除算します。たとえば、18pxをEMに変換する場合、18/16 = 1.125EMを実行します。それらはスケーラブルです。つまり、ユーザーのデフォルトのブラウザ設定またはデバイスの設定に基づいて調整します。これにより、フォントサイズを増やす必要がある視覚障害のあるユーザーがウェブサイトをよりアクセスしやすくします。 EMユニットは、親要素のフォントサイズに基づいて調整されるため、より柔軟で応答性の高い設計も可能になります。

CSSのフォントサイズ以外のプロパティにEMユニットを使用できますか？これには、幅、高さ、パディング、マージン、ラインハイトなどのプロパティが含まれます。これらのプロパティにEMユニットを使用すると、設計の比例関係を維持するのに役立ちます。

CSSのEMユニットのベースフォントサイズを設定するにはどうすればよいですか。たとえば、ベースフォントサイズを18pxにしたい場合は、次のように書きます。html{font-size：18px; }。 CSS内のすべてのEMユニットは、このベースフォントサイズに関連します。これは、子要素のサイズが予想よりも大きくなったり小さくなったりする複利効果につながる可能性があります。これを回避するために、remユニットを使用することができます。これは常にルート要素のサイズに関連しています。

CSSでEMユニットを使用することに不利な点はありますか？

EMユニットは多くの利点を提供しますが、ピクセルのような絶対ユニットよりも管理が困難になる可能性があります。 EMユニットは相対的であるため、実際のサイズはコンテキストに基づいて変更できます。これにより、特にネストされた要素を備えた複雑なレイアウトでは、要素のサイズを予測するのが難しくなります。 CSSのメディアクエリでEMユニットを使用できますか？

はい、メディアクエリでEMユニットを使用できます。実際、メディアクエリでEMユニットを使用すると、設計の応答性が向上します。 EMユニットは相対的であるため、ユーザーのデフォルトのブラウザ設定またはデバイスの設定に基づいて調整します。これは、メディアクエリがビューポートのサイズだけでなく、ユーザーの設定に適応することを意味します。

cssのEMユニットを持つネストされた要素のサイズを計算するにはどうすればよいですか？

ネストされた要素のサイズをEMユニットで計算するには、親要素のサイズにサイズを掛けます。たとえば、親要素のサイズが1.5EMで、子要素のサイズが2EMの場合、子要素の実際のサイズは1.5 * 2 = 3EMです。これは、子要素のサイズが親要素のサイズに関連しているためです。

以上がCSSのEMユニットの力の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。