CSS 単位 – %、em、rem、px、vh、vw-CSSチュートリアル-php.cn

CSS 単位 – %、em、rem、px、vh、vw

PHPz

リリース： 2023-09-08 14:09:02

転載

1325 人が閲覧しました

CSS 单位 – %、em、rem、px、vh、vw

CSS またはカスケードスタイルシートには、ニーズに応じてさまざまな方法でさまざまなプロパティの値を表すことができる多くの単位があります。 font-size、height、width、line-height などの CSS プロパティは、コンテナのさまざまなプロパティを定義するために使用されます。これらのプロパティの値は、さまざまな単位で割り当てることができます。

この記事では、さまざまな CSS ユニットを詳しく見て、実際に実装して各ユニットの使用法を理解します。

CSS では利用可能な CSS ユニットが多数ありますが、この記事では次のプロパティのみを学習または説明します -

ピクセル (px) - ピクセルまたはピクセル単位は最小であり、主に初心者がさまざまな長さのプロパティの値を設定するために使用します。数学的には、1px は 1/96 インチ、つまり 1px = 1/96 インチとして定義されます。

＃＃＃文法＃＃＃

次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します -

リーリー

em
- em 属性は、要素のフォントサイズに相対的な長さ属性値を設定するために使用されます。 em をピクセルと比較すると、1em は 16px と同じであることがわかります。つまり、1em = 16px です。
＃＃＃文法＃＃＃

リーリー

rem

タグ) のフォントサイズに相対的な属性値を設定します。 rem をピクセルと比較すると、1rem も 16px と同じであることがわかります (つまり、1rem = 16px)。
＃＃＃文法＃＃＃次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します -
リーリー

注意

- Web ページやアプリケーションを開発するときは、ピクセル、em、rem を単位として使用しないことをお勧めします。これは、Web ページをレスポンシブにしながら、HTML 内のコンテナーがビューポートのサイズに基づいて幅と高さを動的に変更することを許可しないためです。

Viewport-width (vw) - viewport-width または vw 属性は、Web ページを表示しているユーザーの現在のビューポート幅に基づいて値を設定するために使用されます。これにより、Web ページの現在のビューポートの幅に基づいて、コンテナーがその幅を動的に変更できるようになります。

＃＃＃文法＃＃＃
次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します - リーリー

ビューポートの高さ (vh)

- ビューポートの高さ (vh) は、ビューポートの幅プロパティとほぼ同じです。 vw は要素の動的幅を設定するために使用され、vh は要素の動的高さを設定するために使用されます。ユーザーが高さを変更するたびに、現在のビューポートの高さを基準にして要素の高さが動的に設定されます。

＃＃＃文法＃＃＃

リーリー

パーセント (%)

＃＃＃文法＃＃＃

次の構文は、ピクセル単位を使用してさまざまな長さ属性の値を設定する方法を示します -

リーリー

＃＃＃ステップ＃＃＃

ステップ 1

ステップ 2

- 次のステップでは、前のステップで定義した要素のスタイルを

要素内で定義します。 /head> タグ。

ステップ 3
- 最後のステップでは、さまざまな CSS ユニットを使用してプロパティに値を割り当て、それらの違いを確認します。
＃＃＃例＃＃＃ 以下の例は、すべての CSS ユニットの違いを理解し、実際に理解するのに役立ちます - リーリー
上の例では、要素の高さ、幅、フォントサイズを指定するためにさまざまな CSS 単位を使用しました。＃＃＃＃＃＃結論は＃＃＃この記事では、CSS で length プロパティの値を設定するために使用できるさまざまな CSS 単位について学びました。コード例を使用して実際に実装することで、それらについて詳しく説明します。

以上がCSS 単位 – %、em、rem、px、vh、vwの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。