CSSサイジングユニットの概要

この記事では、CSSサイジングユニットの4つの主要なカテゴリ（絶対、フォント相関、ビューポート関連、コンテナ関連）について説明します。さまざまなデバイスと画面サイズにわたってレスポンシブで適応性のあるWebレイアウトを作成するための目的、最適なユースケース、および選択戦略を調べます。

重要な概念：

1. cssサイジングユニットの概要：

   さまざまなCSSサイジングユニットを紹介し、上記の4つのカテゴリに分類します。 指定された指定、の計算、およびの違いを理解することは、CSSで使用されている値は、効果的なアプリケーションに重要です。

詳細なユニットタイプ：
2. 各ユニットカテゴリの詳細を掘り下げます。絶対ユニットはメディア全体で一貫しています。フォントサイズのフォント関連ユニットスケール。 Viewport Reliativeユニットは、ブラウザウィンドウに調整します。コンテナ関連ユニットは、親要素の寸法に依存します。 実用的な例とユースケースでは、アプリケーションを説明します
   実用的なアプリケーションとベストプラクティス：
この記事は、さまざまな設計シナリオに適したユニットを選択するためのガイダンスで締めくくります。 固定寸法には絶対ユニット、スケーラブルなタイポグラフィ用のフォント関連ユニット、レスポンシブデザイン用のビューポート関連ユニット、およびさまざまなレイアウト内の柔軟なコンポーネント用のコンテナ関連ユニットを使用することをお勧めします。目的は、多様なデバイス全体でウェブサイトの読みやすさ、使いやすさ、アクセシビリティを向上させることです。

3. CSSサイジングユニットの理解

CSSは、要素のサイズまたは長さを指定するためのさまざまな方法を提供します。 これらのユニットは、4つのカテゴリに分類されます

絶対ユニット：

、

、

など。これらのユニットは、他の要素またはビューポートから固定されており、
• フォント関連ユニット：cmpx、in、
、
• など。これらのユニットは、要素またはそのルート要素のフォントサイズに関連しています。 > ViewPort-Reliative Units：emrem、ch、ex、
など。これらのユニットは、ブラウザViewportの寸法に関連しています。
• コンテナ関連ユニット：vw、vh、vmin、vmaxなど。これらの単位は、要素を含むブロックの寸法（コンテナクエリのコンテキスト）の寸法に関連しています。
• 先に進む前に、重要な用語を確認しましょう：
  • 指定された値：StyleSheetで定義されている値
  • 計算値：ブラウザカスケードと継承ルールが適用された後の値。
  使用値：
  • ブラウザの調整と変換後の最終値（絶対ユニットからの相対単位、物理ユニットからピクセル）。
  絶対ユニット

  絶対ユニットは、特定のメディア依存測定に関連付けられています。 印刷の場合、それらは物理ユニットに対応しています。画面では、ピクセルに関連しています（約1/96インチ）。 例には、、

  、

  、in、cm、およびmmが含まれます。 表1は、これらのユニットとその同等物をまとめたものです。 既知の物理的寸法には役立ちますが、調整されたブラウザフォントサイズを使用してユーザーのスケーラビリティがないため、フォントサイズに使用しないでください。 Qptフォント関連ユニットpc

  フォント関連ユニットは、フォントメトリックを使用して要素の寸法を決定します。 これらは、要素の（ローカル）またはルート要素（ルート相関）に関連する場合があります。

  および

  は一般的な例です。 font-sizeは親のfont-sizeに対して相関していますが、emはルート要素のremに関連しています。 em、font-size、rem、およびそれらのルート相対的な対応物（font-size、ch、ex）のような他のユニットは、GLYPHの寸法（キャラクターの視覚的表現）に基づいています。 これらはフォント間で大きく異なる可能性があり、最終的なレンダリングされたサイズに影響します。 このカテゴリには、ラインの高さユニット（icおよびrch）も含まれています。 rexricViewPort-Reliative Unitslhrlh

  ビューポートに関連するユニットは、ブラウザウィンドウの寸法に依存します。 それらは、初期含有ブロック（ページメディアのビューポートまたはページ）に対して計算されます。

  およびは、それぞれビューポートの幅と高さの1％を表します。 および

  は、それぞれ

  とvwのそれぞれが大きくて大きいです。 Dynamic Viewportユニット（vh、vminなど）は、ブラウザーインターフェイス要素のためにビューポートが変更されると調整します。 これらのユニットは、フルスクリーン要素と流動的なタイポグラフィを作成するのに役立ちます。 vmaxvwコンテナ関連ユニットvh dvw

  コンテナ関連ユニット（またはコンテナクエリの長​​さ単位）は、コンテナクエリとともに使用される要素を含むブロックに関連して計算されます。 cqwおよびcqhは、コンテナの幅と高さの1％を表します。 cqiおよびcqbは、それぞれインラインとブロックのサイズに相対的であり、writing-modeプロパティの影響を受けます。 cqminおよびcqmaxは、cqiおよびcqbの小さくて大きいです。 これらのユニットは、さまざまなコンテキストに適応するコンポーネントの作成を可能にします。

  結論

  CSSサイジングユニットのマスタリングは、レスポンシブで適応可能なWebレイアウトを作成するための鍵です。 ユニットの選択は、ウェブサイトの読みやすさ、使いやすさ、アクセシビリティに大きな影響を与えます。 設計のニーズ、ターゲットデバイス、およびアクセシビリティ要件に基づいてユニットを選択します。 多くの場合、異なるユニットの組み合わせが最も効果的なアプローチです。 次のセクションには、さらに明確にするためによくある質問セクションが含まれています。
  （元のFAQセクションの構造と内容を反映して、よくある質問セクションがここに続きます。）

以上がCSSサイジングユニットの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。