CSS3 rem はフォント サイズを設定します_html/css_WEB-ITnose

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

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

1. PX は単位です
2. EM は単位

PX は単位です単位

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

em は単位です

前に述べたように、単位として「px」を使用するとより便利で一貫性がありますが、ページを閲覧するためにブラウザーを拡大または縮小するときに問題が発生します。 「em」単位を使用できます。 Richard Rutter 氏は「ems を使用してテキストのサイズを設定する方法」という記事で詳しく紹介しています。以前に遡りますが、Richard Rutter 氏は「CSS でテキストのサイズを設定する方法」でも詳細な分析を行っています。

この手法には参照点が必要です。参照点は通常、 の "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」を使用する必要があります。これは私たちが必要とする方法ではないかもしれません。

ここでは、これら 2 つの単位の使用法を簡単に紹介します。詳細については、次を参照してください。

1. Best のウェブマスター、Kyle の「CSS Font-Size: em vs. px vs. pt vs.percent」を参照してください。プラクティスは、相対的なCSSフォントサイズのパーセンテージとEMにPXをパーセンテージに変換し、幅を幅と測定単位
oniTS
レムを使用します。ユニット
4. CSS3 の出現に伴い、彼は今日 rem と呼ばれるものを含むいくつかの新しいユニットも導入しました。 Rem は、W3C 公式 Web サイトで「ルート要素のフォント サイズ」
のように説明されています。レムについて詳しく見ていきましょう。
前に述べたように、「em」はその親要素に相対的なフォント サイズを設定します。これにより、どの要素の設定でも、その親要素のサイズを知る必要がある場合があります。予期せぬエラーが発生するリスクが生じます。そして、rem はルート要素 に相対的です。つまり、ルート要素で参照値を決定し、ルート要素でフォント サイズを設定するだけで済みます。これは完全に独自のニーズに基づいて行うことができます。以下の図も参照してください:

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

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

ルート要素 で 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」を併用することを検討できます。 「px」を使用してIE6～8で効果を実現し、その後「Rem」を使用してブラウザの効果を実現します。テキストの変更によって IE6 ～ 8 が変更されないようにしてください。誰がこの Ie6 ～ 8 をこんなに古いものにしたのでしょうか。はー。 。 。 。試してみたくなければ、これは非常に興味深い測定単位になるかもしれません。

転載先: W3CPLUS