CSS3におけるREMユニットの使い方を詳しく解説（コード例）-CSSチュートリアル-php.cn

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

不言

リリース： 2018-11-07 10:50:13

オリジナル

4960 人が閲覧しました

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