キーポイント
:required ATOZ CSSシリーズへようこそ！このシリーズでは、それぞれがアルファベットの異なる文字から始まるさまざまなCSS値（およびプロパティ）を探ります。スクリーンショットでは不十分な場合があることがわかっているため、この記事では、REM値とEM値を使用するための簡単なヒントを追加しました。
を表します 最初のスクリーンショットビデオでは、
pseudoクラスについて学びました。これは、フィールドを満たす必要があるフォームのスタイルに使用できます。
フォーム、検証、およびスタイルのステータスは重要なトピックですが、最初に:requiredを議論したとき、あまり見逃しませんでした。測定のREMユニットを使用するためのいくつかの簡単なヒントを見てみましょう。しかし、最初に、別の相対ユニット、Emを見てみましょう。
em :requiredを使用する長所と短所
次の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><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ブラウザのサポートを支援します
SASSを使用する場合、ハイブリッドマクロと関数を作成して必要なREMサイズを計算し、代替ソリューションを自動的に提供できます。
li {
font-size: 1.5em; /* 24px/16px */
}それだけです。 REMを使用するいくつかの簡単なヒント。現在のプロジェクトでそれらを使用しない場合は、試してみることを強くお勧めします。
li {
font-size: 24px;
font-size: 1.5rem;
}CSSのREMとEMの主な違いは、サイズの基準点を計算することです。その最も近い親要素または現在の要素に比べてフォントサイズをemします。つまり、要素をネストすると、それぞれがEMを使用してフォントサイズを定義する場合、サイズがさらに複雑になり、すぐに制御が困難になる可能性があります。一方、REMはルート要素（またはHTML要素）に関連しています。これは、要素がどれほど深くネストされていても、REMを使用してフォントサイズを定義する場合、HTML要素のフォントサイズを参照し、Webサイトで一貫したサイズを提供することを意味します。 CSSでEMの代わりにREMを使用するのはいつですか？
ピクセルをREMまたはEMに変換するには、最初にドキュメントの参照フォントサイズを知る必要があります。これは通常、HTML要素（通常は16px）に設定されますが、任意の値になる可能性があります。参照フォントサイズがわかったら、REM値またはEM値を、目的のピクセル値を参照フォントサイズで除算することで計算できます。たとえば、ベンチマークフォントサイズが16pxであり、24pxのフォントサイズが必要な場合、計算は24/16 = 1.5remまたは1.5emです。
REMユニットとEMユニットの両方を使用してCSSのサイズを定義できますが、参照ポイントが異なるため、同じ意味で使用することはできません。 REMは常にルート要素に関連していますが、EMは最も近い親要素または現在の要素に関連しています。これは、同じREM値またはEM値が、使用されるコンテキストに応じて異なるサイズをもたらす可能性があることを意味します。
REMおよびEMユニットは、Chrome、Firefox、Safari、Edgeなど、すべての最新のブラウザーでよくサポートされています。ただし、インターネットエクスプローラーの古いバージョンをサポートする必要がある場合（つまり、8以前）、これらのブラウザがREMユニットをサポートしていないことに注意する必要があります。この場合、ピクセルバックアッププランを使用するか、より広いブラウザーサポートを備えたEMユニットの使用を検討する必要があります。
REMおよびEMユニットは、ユーザー設定を容易にし、応答しやすくすることにより、Webサイトのアクセシビリティを大幅に向上させることができます。これらのユニットは相対的であるため、ユーザーはレイアウトを破ることなく、好みに応じてベースラインフォントサイズを調整できます。これは、読みやすくするためにフォントサイズを増やす必要がある視覚障害のあるユーザーにとって特に有益です。
ベストプラクティスは、REMユニットを使用してフォントサイズ、マージン、およびパディングを定義して、ウェブサイト全体で一貫性を確保することです。ドロップダウンメニューやツールチップなど、親要素でスケーリングする必要がある要素には、EMユニットを使用できます。また、ベンチマークフォントサイズをHTML要素の割合として定義することをお勧めします。これにより、ユーザーは好みに応じてベンチマークフォントサイズを調整できます。
REMおよびEMユニットは、他のユニットと同様にメディアクエリで使用できます。ただし、これらのユニットは相対的であるため、メディアクエリをより柔軟で応答性の高いものにすることができます。たとえば、EMユニットを使用してブレークポイントを定義すると、ベースフォントサイズでスケーリングされ、レイアウトがユーザー設定に適応できるようになります。
はい、レムおよびEMユニットは、テキストだけでなく、CSSの任意のサイズ定義に使用できます。これには、幅、高さ、充填、マージン、境界幅、さらには位置決めが含まれます。これらのプロパティにREMおよびEMユニットを使用すると、レイアウトがより柔軟で応答性が高くなります。
サイズが複合されるため、ネストされた要素は、EMユニットを使用する場合の課題になります。これに対処する1つの方法は、ネストされた要素のフォントサイズを1EMにリセットすることです。これにより、親要素のフォントサイズに等しくなります。または、ネストされた要素にREMユニットを使用して、サイズ変更の一貫性を確保することもできます。以上がATOZ CSSクイックヒント：REMとEMの利点の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
