ホームページ > 記事 > ウェブフロントエンド > css3に追加された新しいユニットは何ですか
css3に追加された新しいユニットは何ですか
- 青灯夜游オリジナル
- 2022-01-12 17:17:072064ブラウズ
css3 で追加された新しい単位: 1. "ch"、文字 0 の幅、2. "rem"、主にルート要素のフォントのサイズに関連する相対単位、3. "vw" 、ウィンドウの幅、4. "vh"、ウィンドウの高さ、5. "vmin"、6. "vmax" など。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS3 の新しい長さの単位
CSS3 の新しい長さの単位は次のとおりです。
-
ch(文字 0 remの幅) は相対単位であり、主にルート要素のフォントのサイズに関連します。 rem を使用するには、指定されたルート要素を参照する必要があります。vw、ビューポイント幅、ウィンドウ幅、1vw=ウィンドウ幅の 1%vh、視点の高さ、ウィンドウの高さ、1vh=ウィンドウの高さの 1%vmin、vmaxなど
新しく追加された視点関連ユニットは、通常、モバイル デバイスを対象としています。
rem は実際には em と同じものですが、rem にはルート要素 (html 要素) を表す追加の制限がある点が異なります。フォントサイズ。次の例で、
rem と em の違いを確認できます。
<html style="font-size: 12px;">
<body>
<div id="div1" style="font-size: 16px">
<div id="div2" style="font-size: 1.2em"></div>
<div id="div3" style="font-size: 1.2rem">
<div id="div4" style="font-size: 1.2em"></div>
</div>
</div>
</body>
</html>現時点では、
div2 のフォント サイズ:
16px*1.2em=19.2px- ##div3 のフォント サイズ:
12px*1.2 rem=14.4px
- div4 のフォントサイズ:
12px*1.2rem*1.2em=17.28px
rem にはカスケード関係がありませんが、em にはカスケード関係があることがわかります。
rem 単位をサポートしていないことに注意してください。
css ビデオ チュートリアル)
以上がcss3に追加された新しいユニットは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。