ホームページ > 記事 > ウェブフロントエンド > CSS3 remの解析について（フォントサイズの設定）

CSS3 remの解析について（フォントサイズの設定）

不言オリジナル: 2018-06-20 15:37:362272ブラウズ

この記事では主にCSS3 rem（フォントサイズの設定）チュートリアルの詳細な説明を紹介しています。非常に優れた内容なので、参考にしてください。

css3 では、新しい相対単位 rem が追加されています。rem の使用は、相対フォントサイズ単位としての em と同じです。違いは、rem が HTML ルート要素に対して相対的であることです。多くのネチズンがレムについて言及したので、ここでそのうちの1つを要約します。

Web のページのフォントサイズを定義するにはどの単位を使用するべきですか? 現在でも激しい議論があり、PX が良い単位だという人もいれば、EM には多くの利点があるという人もいます。 CSS Font-Size：em vs. px vs. pt vs. パーセントなどのPKの全体的な状況が表示されるので便利です。残念ながら、それぞれのテクニックには依然としてさまざまな長所と短所があり、理想的ではありませんが、それでも使用しないのは困難です。

レムを詳しく紹介する前に、まず、最も物議を醸している 2 つの一般的に使用される測定単位を確認しましょう:

PX は単位です
EM は単位です

ピクセルの単位は

Web ページの初期制作では、より安定していて正確であるため、テキストの設定には常に「ピクセル」を使用します。しかし、この方法には問題があり、ユーザーがブラウザで作成した Web ページを閲覧するときに、ブラウザのフォントサイズを変更すると、Web ページのレイアウトが崩れてしまいます。これは、Web サイトの使いやすさを懸念しているユーザーにとって大きな問題です。したがって、Web ページのフォントを定義するために「em」を使用することが提案されました。

emは単位です

前に述べたように、単位として「px」を使用する方が便利で一貫性がありますが、ページを閲覧するためにブラウザーでズームまたはズームするときに問題が発生します。問題は、「em」単位を使用できることです。

この手法には参照点が必要です。参照点は通常、6c04bd5ca3fcae76e30b72ad730ca86d の "font-size" に基づいています。たとえば、「1em」を「10px」に設定してデフォルト値「1em=16px」を変更すると、フォントサイズを「14px」に設定するだけで済みます。「1.4em」。

body {
    font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
}
h1 {
    font-size: 2.4em; /*2.4em × 10 = 24px */
}
p   {
    font-size: 1.4em; /*1.4em × 10 = 14px */
}
li {
    font-size: 1.4em; /*1.4 × ? = 14px ? */
}

「li」の「1.4em」が「14px」なのか疑問符なのはなぜですか？「em」を理解していれば、この質問はあまりにも聞きすぎだと感じるでしょう。前にも簡単に紹介しましたが、「em」を単位として使用する場合、「em」は相対値であり、実際の計算式は次のようになります。 :

1 ÷ 親要素のフォントサイズ × 変換するピクセル値 = em 値

この場合、「1.4em」は「14px」、「20px」、または「24px」になります。は不確実な値であるため、この問題を解決するには、親要素の値を知っているか、子要素で「1em」を使用する必要があります。これは私たちが必要とする方法ではないかもしれません。

rem はユニットです

CSS3 の出現に伴い、現在 rem と呼ばれるものを含む、いくつかの新しいユニットも導入されました。 Rem は、W3C 公式 Web サイトに「ルート要素のフォントサイズ」のように説明されています。レムについて詳しく見ていきましょう。

前に述べたように、「em」はその親要素に相対的なフォントサイズを設定します。これにより、どの要素設定でも、その親要素のサイズを知る必要がある場合があります。予期せぬエラーが発生するリスクが生じます。そして、rem はルート要素 100db36a723c770d327fc0aef2ce13b1 に相対的です。つまり、ルート要素で参照値を決定し、ルート要素でフォントサイズを設定するだけで済みます。これは完全に独自のニーズに基づいて行うことができます。以下の図も参照してください:

簡単な例を見てみましょう:

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

ルート要素 100db36a723c770d327fc0aef2ce13b1 で基本フォントサイズ 62.5% (つまり 10px) を定義しました。この値を設定するのは主に計算を容易にするためであり、設定がない場合は「16px」に基づいて計算されます。上記の計算結果から、「rem」を「px」と同じように便利に使用できると同時に、「px」と「em」の違いを解決することができます。

ブラウザの互換性

rem は、CSS3 で新しく導入された測定単位です。ブラウザのサポートについては、誰もが間違いなく不満や不安を感じるでしょう。実際、Mozilla Firefox 3.6 以降、Apple Safari 5 以降、Google Chrome、IE9 以降、Opera11 以降など、サポートされているブラウザが多数あることに驚かれるかもしれません。貧弱な IE6 ～ 8 ではそれができないので、それらを透明なものとして扱ってください。私はいつもそうしています。

ただし、単位を使用してフォントを設定する場合、IE を完全に無視することはできません。この REM を使用したいが、IE での効果と互換性を持たせたい場合は、「px」と「rem」を併用することを検討できます。 IE6～8で効果を実現するには「px」を使用し、ブラウザの効果を実現するには「Rem」を使用します。テキストの変更によって IE6 ～ 8 が変更されないようにしてください。誰がこの Ie6 ～ 8 をこんなに古いものにしたのでしょう。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

CSS3 remの解析について（フォントサイズの設定）

関連記事