CSS3で新しい長さ単位を使用する方法

使用法: 1. em は、現在のオブジェクト内のテキストに対する相対的なフォント サイズを表します。2. rem は、ルート要素に対する相対的なフォント サイズを表します。3. ch は、数値 0 のサイズを表します。4. vh はビューのパーセンテージを表します ウィンドウの高さを表します; 5. vw はビューポートの幅をパーセンテージで表します; 6. ex は現在のフォントの小文字 x 文字の高さ、または 1em の 1/2 を表します。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 での新しい長さ単位の使用法

css3 での新しい長さ単位は次のとおりです:

• em: のテキストに対する相対値現在のオブジェクトのフォント サイズ。親ノードに対する相対的なフォント サイズ

• rem: ルート要素 に対する相対的なフォント サイズ。アプリケーション シナリオ: レイアウトはテキストの内容によって決まります。

• vh と vv: 1vh はビューポートの高さ①の 1/100 に等しく、1vw はビューポートの幅の 1/100 に等しい。

• vmin と vmax: ビューポートの高さと幅の最小値または最大値に関して、vmin はビューポートの幅と高さの最小値の 1/100 に等しくなります。アプリケーション シナリオ: 要素を常に画面上に表示します。

• ch: 数字 0 の幅

• 例: 現在のフォントの小文字 x 文字の高さ、または 1/2 1em②。適用シナリオ: 上付き文字と下付き文字

ch -- 文字の幅 0 (ゼロ)

rem -- ルート要素 (html 要素) のフォント サイズとは＃＃＃＃＃＃ 平均？

たとえば、ルート要素 html のフォント サイズが 100px の場合、ルート要素以下の要素の rem 設定はすべて 1rem = 100px になります。

rem の初期値は 16px です。これは、ルート ノードのフォント サイズが設定されていない場合、1rem = 16px

これがルート要素 html に対して相対的な値であることを意味します。 body が設定されている場合、機能しません。

覚えておいてください: vw と vh はブラウザの表示領域、つまり window.innerHeight、window.innerWidth

vw に対してのみ相対的です。ブラウザの可視領域、1vw はブラウザの可視領域の幅の 1% に等しい

vh -- ブラウザの可視領域、1vh はブラウザの可視領域の高さの 1% に等しい

vmin -- vw と vh の小さい方 one

vmax -- vw と vh の間の大きい方

たとえば、ブラウザの幅/高さは 1000px/600px に設定されます。

それでは、

2vmin = 600*2/100 = 12px
2vmax = 1000*2/100 = 20px

(学習ビデオ共有:

css ビデオ チュートリアル

)

以上がCSS3で新しい長さ単位を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。