CSS でフォ​​ントに一般的に使用される単位は何ですか?

CSS でフォ​​ントに一般的に使用される単位は次のとおりです: 1. px (ピクセル)、固定サイズの単位、2. em、親要素のフォント サイズに対する相対的な長さの単位; 3. 相対長さの単位である rem は、ルート ノード (または html ノード) を基準としたフォント サイズです; 4. % は、親要素を基準とした相対長さの単位です。

このチュートリアルの動作環境: Windows 10 システム、CSS3、この記事はすべてのブランドのコンピューターに適用されます。

関連する推奨事項: 「CSS ビデオ チュートリアル 」

1. CSS のフォントによく使用される単位は、px、em、rem、および %# です。

##1. px (ピクセル)

px 単位の名前はピクセルであり、固定サイズの単位です。は（コンピュータ/携帯電話）画面の場合、ピクセル（1px）は（コンピュータ/携帯電話）画面上の点、つまり画面解像度の最小分割です。固定サイズの単位なので、これだけでデザインしたWebページを大きな画面（パソコン）に適応させると、小さな画面（携帯電話）では非常に不親切となり、適応効果が得られません。

例:

nbsp;html>

 
  <meta> 
  <title>css px像素固定长度单位</title> 
  <style>
    body{background-color: #aaa;}
   .px{border:1px solid red;width:300px;height:100px;font-size:30px;}
  </style>
 
  
  <div>
   用px单位设置元素的宽高和文本的字体大小
  </div> 
 

実行結果:

##2, em (相対長単位)

em 単位も、特に海外でよく使用されます。em 単位の名前は、親要素オブジェクト内のテキストのフォント サイズを基準にして、テキストのフォント サイズを設定するために使用される相対的な長さの単位です。 ; 人工的なフォントがない場合 現在のオブジェクト内のテキストのフォント サイズを、ブラウザのデフォルトのフォント サイズ (16px) を基準にして設定します。

例:

nbsp;html>

 
  <meta> 
  <title>用em相对长度单位来设置文本的字体大小</title> 
  <style>
    body{background-color: #aaa;}
    .div{border:1px solid red;width:300px;height:100px;font-size:30px;}
    .em{font-size:0.5em;}/*30px x 0.5 = 15px*/
  </style>
 
  
  <div>
   <span>用em相对长度单位来设置文本的字体大小</span>
  </div> 
 

実行結果:

説明: 上記の例 em は親要素 div に相対的であり、divが設定されている フォント サイズは 30px なので、0.5em のフォント サイズの計算値は次のようになります: 30px x 0.5 = 15px

3.rem (css3 の新しい相対長単位)

Rem は、CSS3 の新しい相対長単位です。em の欠点を解決するように見えます。Em は、親要素に対する相対的なフォント サイズと言えます。親要素のフォント サイズが変更された場合、再計算する必要があります。 rem の登場により、このような問題は解決されます。rem は、HTML 要素であるルート ノードに対してのみ相対的です。したがって、HTML タグでフォント サイズが設定されている限り、ドキュメント内のフォント サイズは、アダプティブ レイアウトで一般に使用されるこの参照標準に基づきます。

nbsp;html>

 
  <meta> 
  <title>用css3新增的相对长度单位rem来设置文本的字体大小</title> 
  <style>
    body{background-color: #aaa;}
   .div{border:1px solid red;width:300px;height:100px;font-size:30px;}
   .rem{font-size:0.5rem;}/*16px x 0.5 = 8px*/ 
</style>
 
  
  <div>
   <span>用rem相对长度单位来设置文本的字体大小</span>
  </div> 
 

注: rem は、ルート要素 html 要素を基準にしています。ブラウザのデフォルトのフォント サイズは、通常 16 ピクセルです。すべての 0.5rem の計算されたフォント サイズは、16 ピクセルです。 x 0.5 = 8px, これは親要素で設定された 30px とは関係ありません。

4. % (パーセント)

% も非常に一般的です。 em とほぼ同じで、両方とも親要素を基準とします。ただし、% は幅、高さ、フォント サイズなどの多くの属性で使用できます。 Em はフォント サイズ (font-size) を設定するために使用される単位です。幅や高さなどのプロパティには em 単位がありません。

2. px、em、rem、%

px の違いと概要 %

• px は固定長の単位です他の要素の変更に応じて変化します。

• em と % は親要素を基準とした単位であり、親要素 (font- size または他の属性);

• rem はルート ディレクトリ (HTML 要素) を基準とするため、HTML 要素の属性 (font-size) によって変化します。

• px と % はより広く使用されており、より多くの属性の単位として機能します。一方、em と rem はフォント サイズの単位であり、フォント サイズ属性の単位として使用されます

一般的に言えば: 1em = 1rem = 100% = 16 px

プログラミング関連の知識の詳細については、###プログラミング ビデオ###をご覧ください。 ！ ###

以上がCSS でフォ​​ントに一般的に使用される単位は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。