ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3におけるREMユニットの使い方を詳しく解説(コード例)
多くの Web サイトでは、さまざまなデバイスでの調整が困難なピクセル単位が使用されています。CSS3 では、「root em」を表す REM 単位を含むいくつかの新しい単位が導入されています。レム。
それでは、REM をどのように使用するのでしょうか?
次の CSS があるとします。
CSS
article h2 {font-size:20px;} article p {font-size:12px;}
まず、すべてのフォントに対する相対的なピクセル サイズを決定する必要があります。便宜上、ルートのフォント サイズを次のように 1px にするのが最善でした。
CSS
html {font-size:1px;}
次に、残りのフォント サイズの値を変更する必要があります。ピクセルの単位はレム単位に置き換えられます。
CSS
article h2 {font-size:20rem;} article p {font-size:12rem;}
REM の動作は、20REM を取得し、ルート要素で乗算します:
20 REM * 1 PX = 20PX.
ブラウザ サポート
IE7 IE8 では引き続き PX 値を使用する必要があります。これにより、フォント サイズを 2 回 (1 回目は PX で、2 回目は REM で) 記述する必要があります。
CSS
article h2 {font-size:20px; font-size:20rem;} article p {font-size:12px; font-size:12rem;}
例は次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html{font-size:1px;} article h2{ font-size:20px;/*Support IE7 & IE8*/ font-size:20rem; } article p{ font-size:12px;/*Support IE7 & IE8*/ font-size:12rem; } </style> </head> <body> <section> <article> <h2>php中文网</h2> <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p> </article> <article> <h2>php中文网1</h2> <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p> </article> <article> <h2>php中文网2</h2> <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p> </article> </section> </body> </html>
効果は次のとおりです:
##REM にはどのような利点がありますか?
Web サイト内のすべてのフォントを 20% 大きくする必要があるとします。必要なのは、ルート要素のフォント サイズを次のように変更することだけです。html {font-size:1.2px;}フォント サイズを 20% 縮小したい場合は、次のようにします:
html{font-size:0.8px;}#REM (レスポンシブ デザイン用)
フォント サイズを縮小したい場合レスポンシブ デザインの中断に従って、クリックしてすべてのフォント サイズを変更すると、簡単になります。例を参照してください:
@media (min-width: 320px){ html{ font-size:1.4px; }} @media (min-width: 600px){ html{ font-size:1.2px; }}
小さい画面ではすべてのフォントのサイズを 40% 大きく変更でき、中程度の画面では 20% 大きく変更できます。
コンテンツを 2 回書く必要性を解決するには、less を使用します - 古いブラウザをサポートするためです。less または sass では、常に 2 回書く手間を省く関数を追加できます。 。
less-font-size 関数を使用して、それを呼び出すことができます。
.font-size(@font-size) { font-size : @font-size * 1px; font-size : @font-size * 1rem; } article h2 { .font-size(20); }
コンパイルされた CSS は次のようになります:
article h2{ font-size:20px; /*Support IE7 & IE8*/ font-size:20rem; }
以上がCSS3におけるREMユニットの使い方を詳しく解説(コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。