ホームページ > 記事 > ウェブフロントエンド > CSS3におけるREMユニットの使い方を詳しく解説（コード例）

CSS3におけるREMユニットの使い方を詳しく解説（コード例）

不言オリジナル: 2018-11-07 10:50:134865ブラウズ

多くの 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>

効果は次のとおりです:

CSS3におけるREMユニットの使い方を詳しく解説（コード例）

##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 サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS疑似クラスnth-child()の例の詳細説明次の記事：CSS疑似クラスnth-child()の例の詳細説明

続きを見る

CSSでのremユニットの紹介