CSS レイアウト単位の進化と応用: ピクセルからルート要素のフォント サイズに基づく相対単位へ

px から rem へ: CSS レイアウト ユニットの進化と応用

はじめに:
フロントエンド開発では、CSS を使用して実装する必要があることがよくあります。ページレイアウト 。過去数年にわたって、CSS レイアウト ユニットは進化し、発展してきました。最初は要素のサイズと位置を設定する単位としてピクセル (px) を使用しました。しかし、レスポンシブ デザインの台頭とモバイル デバイスの普及により、ピクセル ユニットにはいくつかの問題が徐々に明らかになってきました。これらの問題を解決するために、新しい単位 rem が登場し、CSS レイアウトで徐々に広く使用されるようになりました。

1. ピクセル単位 (px) の制限
1.1 固定サイズ
ピクセル単位は最も初期に広く使用された単位であり、レイアウト上で固定サイズになるという特徴があります。つまり、異なるデバイスや異なる画面サイズでページを表示すると、ピクセル単位のサイズが適応されず、ページのレイアウトが乱れたり、完全に表示できなくなったりすることがあります。

1.2 高解像度デバイスの問題
Retina スクリーンなどの高解像度デバイスの普及に伴い、ピクセル ユニットの欠点がより明らかになりました。ピクセル単位の設定が低い要素を高解像度のデバイスで表示すると、ピクセル化や表示の不鮮明さが発生し、ユーザー エクスペリエンスに影響を与えます。

1.3 複雑な編集
デバイスの解像度に応じてピクセル単位を調整する必要があるため、CSS を記述する際にデバイスごとのピクセル密度を考慮する必要があり、記述が複雑になります。コードのメンテナンスも行います。

2. rem ユニットの概要
2.1 rem とは
rem はルート要素 (html) を基準とした相対的なフォント サイズの単位を表す相対単位です。そのサイズは、ルート要素のフォント サイズに相対します。ルート要素のフォント サイズを 16px に設定すると、1rem は 16px に等しくなります。

2.2 rem の利点

• 適応型レイアウト: rem 単位を使用すると、ルート要素のフォント サイズに応じて適応的に調整できるため、さまざまなデバイス上で柔軟なレイアウト変更が実現します。
• 高解像度デバイスの問題の解決: rem は相対単位であり、デバイスのピクセル密度の影響を受けないため、異なる解像度でも一貫したレイアウト効果を実現できます。
• コード記述の簡素化: rem 単位を使用するとコードの記述が簡素化され、さまざまなデバイスのピクセル密度を考慮する必要がなくなりました。

3. rem ユニットの使用方法
3.1 ルート要素のフォント サイズの設定
rem ユニットを使用する前に、最初にルート要素のフォント サイズを設定する必要があります。通常、ルート要素のフォント サイズは 16px、つまり 1rem=16px に設定します。

html {
  font-size: 16px;
}

3.2 rem 単位の使用
ルート要素のフォント サイズを設定したら、他の要素のレイアウトに rem 単位を使用できます。

.container {
  width: 20rem; /* 相当于320px */
  height: 10rem; /* 相当于160px */
  font-size: 1.2rem; /* 相当于19.2px */
  margin-top: 2rem; /* 相当于32px */
}

4. ルート要素のフォント サイズを動的に変更する
4.1 メディア クエリ
メディア クエリを使用すると、さまざまな画面サイズに応じてルート要素のフォント サイズを動的に変更できます。

@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

4.2 JavaScript の動的計算
JavaScript を使用して、画面サイズに基づいてルート要素のフォント サイズを動的に計算します。

function setRootFontSize() {
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var fontSize = screenWidth / 10;
  document.documentElement.style.fontSize = fontSize + 'px';
}

setRootFontSize();

window.addEventListener('resize', setRootFontSize);

5. 概要
rem ユニットを使用すると、レスポンシブ レイアウトを実装し、さまざまなデバイスでのレイアウトの問題を解決できます。 rem 単位を使用すると、コードの記述を簡素化しながら、レイアウトをより柔軟かつ適応的にすることができます。実際のプロジェクトでは、実際のニーズに応じて適切なレイアウト単位を選択し、より良いユーザー エクスペリエンスを実現するために rem 単位を合理的に使用する必要があります。

参考資料:

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-size
• https:/ / www.w3schools.com/cssref/css_units.asp
• https://juejin.cn/post/6844904117648772110

以上がCSS レイアウト単位の進化と応用: ピクセルからルート要素のフォント サイズに基づく相対単位への詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。