ATOZ CSSクイックヒント：REMとEMの利点

キーポイント

「EM」などの相対ユニットを使用してテキストサイズと要素の内部および外部間隔を設定することは、特に応答性の高いプロジェクトでピクセルを使用するよりも柔軟です。ただし、「EM」ユニットは、ネストされた要素に問題を引き起こし、各ネストレベルで指数関数的に成長または縮小します。
「REM」ユニットは、ルート要素のフォントサイズに基づいて常に計算されるため、フォントサイズの設定におけるより信頼性の高い代替手段です。これにより、ネストされた要素で「EM」ユニットを使用するときに発生する指数関数的な成長または収縮が回避されます。
• ブラウザサポートの場合、特にインターネットエクスプローラーの古いバージョンの場合、JS PolyFillまたはPXの代替案を使用できます。 SASSを使用する場合、ハイブリッドマクロと機能を作成して必要なREMサイズを計算し、自動的にバックアッププランを提供できます。
この記事は、ATOZ CSSシリーズの一部です。このシリーズの他のエントリをここで見つけることができます。こちらで、対応するビデオ（

pseudoクラスに関するビデオ）の全文とスクリーンショットを表示できます。

:required ATOZ CSSシリーズへようこそ！このシリーズでは、それぞれがアルファベットの異なる文字から始まるさまざまなCSS値（およびプロパティ）を探ります。スクリーンショットでは不十分な場合があることがわかっているため、この記事では、REM値とEM値を使用するための簡単なヒントを追加しました。

rはremとem

を表します 最初のスクリーンショットビデオでは、

pseudoクラスについて学びました。これは、フィールドを満たす必要があるフォームのスタイルに使用できます。

フォーム、検証、およびスタイルのステータスは重要なトピックですが、最初に:requiredを議論したとき、あまり見逃しませんでした。測定のREMユニットを使用するためのいくつかの簡単なヒントを見てみましょう。しかし、最初に、別の相対ユニット、Emを見てみましょう。

em :requiredを使用する長所と短所

レスポンシブアイテムを操作する場合、EMなどの相対ユニットを使用してテキストサイズと要素の内部および外部間隔を設定することは、ピクセルを使用するよりも柔軟です。これは、このユニットにより、要素のサイズ、間隔、およびテキストコンテンツが、親要素のフォントサイズと比較して、親要素のフォントサイズに比例して成長できるためです。

これらの相対ユニットを使用すると、要素のフォントサイズ値を変更すると、その中の子要素にカスケード効果がある場合、スケールシステムを構築できます。比例システムは良いことですが、EMのこの動作には欠点があります。

次のHTMLコードスニペットを検討してください：

このネストされたリストは、世界で最も一般的なものではありませんが、条件のページまたは他の種類の公式文書に表示される可能性があります。

<ul>
  <li>lorem ipsum</li>
  <li>dolor sit
   <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ol>
  </li>
</ul>

リスト項目を際立たせたい場合は、フォントサイズを16pxのベンチマークサイズの1.5倍に設定できます。

<ul>
  <li>lorem ipsum</li>
  <li>dolor sit
   <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ol>
  </li>
</ul>

しかし、これにより、ネストされたLIが親要素のサイズの1.5倍になるため、ネストされたLIの問題が発生します。ネストされたアイテムは、16pxの1.5倍ではなく、24pxより1.5倍高くなります。その結果、ネストされたリスト項目は、各ネストレベルで指数関数的に成長します。これは、デザイナーが望んでいる結果ではないかもしれません！

ネストされた要素とEM値が1未満の場合、同様の問題も発生します。この場合、ネストされたアイテムは、各ネストレベルで常に減少します。

それで、私たちは何をすべきですか？

remを使用してテキストサイズを設定します

フォントサイズが増加または減少することを避けるために、代替ユニットを使用できます。

ピクセルを使用できますが、前述のように、相対ユニットはレスポンシブプロジェクトでより柔軟です。代わりに、これは常にルート要素のフォントサイズに基づいているため、REMユニットを使用できます。これは、通常、WebサイトまたはWebアプリケーションの場合はHTML要素です。 .SVGまたは.XMLドキュメントでは、ルート要素は異なる場合がありますが、これらのタイプのドキュメントは現在の範囲外です。

REMを使用してフォントサイズを設定する場合、EMが使用されないという意味ではありません。私はEMを使用して要素内にパディングを設定する傾向があり、間隔が常にテキストサイズに関連するようになります。

SASSを使用して、REMブラウザのサポートを支援します

remユニットは、IE9以降のみからサポートされています。 IE8（または以前）のサポートが必要な場合は、JS PolyFillを使用するか、次のようにPXの代替品を提供できます。

SASSを使用する場合、ハイブリッドマクロと関数を作成して必要なREMサイズを計算し、代替ソリューションを自動的に提供できます。

li {
  font-size: 1.5em; /* 24px/16px */
}

それだけです。 REMを使用するいくつかの簡単なヒント。現在のプロジェクトでそれらを使用しない場合は、試してみることを強くお勧めします。

li {
  font-size: 24px;
  font-size: 1.5rem;
}

CSSのREM値とEM値のFAQ CSSのREMとEMの主な違いは何ですか？

CSSのREMとEMの主な違いは、サイズの基準点を計算することです。その最も近い親要素または現在の要素に比べてフォントサイズをemします。つまり、要素をネストすると、それぞれがEMを使用してフォントサイズを定義する場合、サイズがさらに複雑になり、すぐに制御が困難になる可能性があります。一方、REMはルート要素（またはHTML要素）に関連しています。これは、要素がどれほど深くネストされていても、REMを使用してフォントサイズを定義する場合、HTML要素のフォントサイズを参照し、Webサイトで一貫したサイズを提供することを意味します。 CSSでEMの代わりにREMを使用するのはいつですか？

remは通常、ウェブサイト全体で一貫した予測可能なサイズを作成する場合に使用されます。 REMはルート要素に関連しているため、サイズ変更は、あなたの要素がどれほど深くネストされていても、一貫性を保ちます。これは、一貫性と予測可能性が重要な応答性のある設計を構築するのに特に役立ちます。ただし、よりダイナミックでスケーラブルなデザインを作成する場合は、要素のサイズが親に比べてEMを使用できます。

CSSでピクセルをREMまたはEMに変換する方法は？

ピクセルをREMまたはEMに変換するには、最初にドキュメントの参照フォントサイズを知る必要があります。これは通常、HTML要素（通常は16px）に設定されますが、任意の値になる可能性があります。参照フォントサイズがわかったら、REM値またはEM値を、目的のピクセル値を参照フォントサイズで除算することで計算できます。たとえば、ベンチマークフォントサイズが16pxであり、24pxのフォントサイズが必要な場合、計算は24/16 = 1.5remまたは1.5emです。

REMユニットとEMユニットは同じ意味で使用できますか？

REMユニットとEMユニットの両方を使用してCSSのサイズを定義できますが、参照ポイントが異なるため、同じ意味で使用することはできません。 REMは常にルート要素に関連していますが、EMは最も近い親要素または現在の要素に関連しています。これは、同じREM値またはEM値が、使用されるコンテキストに応じて異なるサイズをもたらす可能性があることを意味します。

ブラウザの互換性は、REMユニットとEMユニットの使用にどのように影響しますか？

REMおよびEMユニットは、Chrome、Firefox、Safari、Edgeなど、すべての最新のブラウザーでよくサポートされています。ただし、インターネットエクスプローラーの古いバージョンをサポートする必要がある場合（つまり、8以前）、これらのブラウザがREMユニットをサポートしていないことに注意する必要があります。この場合、ピクセルバックアッププランを使用するか、より広いブラウザーサポートを備えたEMユニットの使用を検討する必要があります。

REMユニットとEMユニットはアクセシビリティにどのように影響しますか？

REMおよびEMユニットは、ユーザー設定を容易にし、応答しやすくすることにより、Webサイトのアクセシビリティを大幅に向上させることができます。これらのユニットは相対的であるため、ユーザーはレイアウトを破ることなく、好みに応じてベースラインフォントサイズを調整できます。これは、読みやすくするためにフォントサイズを増やす必要がある視覚障害のあるユーザーにとって特に有益です。

REMユニットとEMユニットを使用するためのベストプラクティスは何ですか？

ベストプラクティスは、REMユニットを使用してフォントサイズ、マージン、およびパディングを定義して、ウェブサイト全体で一貫性を確保することです。ドロップダウンメニューやツールチップなど、親要素でスケーリングする必要がある要素には、EMユニットを使用できます。また、ベンチマークフォントサイズをHTML要素の割合として定義することをお勧めします。これにより、ユーザーは好みに応じてベンチマークフォントサイズを調整できます。

REMおよびEMユニットはメディアクエリをどのように連携しますか？

REMおよびEMユニットは、他のユニットと同様にメディアクエリで使用できます。ただし、これらのユニットは相対的であるため、メディアクエリをより柔軟で応答性の高いものにすることができます。たとえば、EMユニットを使用してブレークポイントを定義すると、ベースフォントサイズでスケーリングされ、レイアウトがユーザー設定に適応できるようになります。

テキスト以外の要素にREMおよびEMユニットを使用できますか？

はい、レムおよびEMユニットは、テキストだけでなく、CSSの任意のサイズ定義に使用できます。これには、幅、高さ、充填、マージン、境界幅、さらには位置決めが含まれます。これらのプロパティにREMおよびEMユニットを使用すると、レイアウトがより柔軟で応答性が高くなります。

サイズが複合されるため、ネストされた要素は、EMユニットを使用する場合の課題になります。これに対処する1つの方法は、ネストされた要素のフォントサイズを1EMにリセットすることです。これにより、親要素のフォントサイズに等しくなります。または、ネストされた要素にREMユニットを使用して、サイズ変更の一貫性を確保することもできます。

以上がATOZ CSSクイックヒント：REMとEMの利点の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。