CSSのサイズ単位は何ですか?

CSS にはさまざまなサイズ単位があり、それぞれの単位には適用可能なシナリオと用途があります。以下では、一般的に使用される CSS サイズ単位を詳しく紹介し、対応するコード例を示します。

1. ピクセル (px)
   ピクセルは、最も一般的に使用されるサイズの単位の 1 つです。これは画面の物理ピクセルを基準にして測定され、サイズは固定されています。 CSS スタイルを記述するときは、幅、高さ、境界線、内側と外側の余白などのプロパティの値としてピクセルを直接使用できます。例:

   div {
     width: 200px;
     height: 100px;
     border: 1px solid #000;
     padding: 10px;
     margin: 20px;
   }

2. パーセント (%)
   パーセントは、親要素のサイズに対する相対的な測定単位です。幅、高さ、内側と外側のマージン、境界線などの属性に使用できます。パーセンテージを設定することで、レスポンシブなレイアウトを実現できます。例:

   div {
     width: 50%;
     height: 50%;
   }

3. em
   em は、現在の要素のフォント サイズに対する相対的な測定単位です。フォント サイズが明示的に設定されていない場合、em 単位のサイズは親要素のフォント サイズと等しくなります。幅、高さ、内側と外側のマージン、境界線などの属性に使用できます。例:

   div {
     width: 2em;
     height: 2em;
     padding: 1em;
     border: 0.5em solid #000;
   }

4. rem
   rem は、ルート要素 (つまり、html 要素) のフォント サイズに対する相対的な測定単位です。幅、高さ、内側と外側のマージン、境界線などの属性に使用できます。グローバルなサイズ制御は、ルート要素のフォント サイズを設定することで実現できます。例:

   html {
     font-size: 16px; /* 设置根元素的字体大小为16px */
   }
   div {
     width: 20rem;
     height: 10rem;
     padding: 4rem;
     border: 2rem solid #000;
   }

5. vw および vh
   vw はビューポートの幅のパーセンテージ、vh はビューポートの高さのパーセンテージです。これらは、ブラウザのビューポートの寸法を基準にして測定されます。幅、高さなどのプロパティに使用できます。 vwとvhを設定することでレスポンシブレイアウトを実現できます。例:

   div {
     width: 50vw; /* 视口宽度的50% */
     height: 50vh; /* 视口高度的50% */
   }

概要:
この記事では、ピクセル、パーセンテージ、em、rem、vw、vh など、CSS で一般的に使用されるサイズ単位を紹介します。サイズ単位を合理的に選択して使用すると、Web ページを適応性と応答性に優れたものにすることができます。実際の開発では、ニーズやシナリオに応じて適切な単位を選択して設定することで、ページのレイアウトをより柔軟で美しくすることができます。

以上がCSSのサイズ単位は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。