長さの単位は、一般的に絶対的な長さの単位と相対的な長さの単位に分けることができます。 CSS で最もよく知られているのは間違いなく px と em ですが、他にも pt、rem、vw、vh などの測定単位があり、これらをうまく使用することで開発効率が大幅に向上します。この記事では、フロントエンド開発で使用される CSS ユニットとそのアプリケーション シナリオを整理します。
px は、ピクセルの略で、ピクセルに基づく単位です。 Web の閲覧中、画面上のテキストや画像は画面解像度に応じて変化します。幅 100 ピクセルの画像は、解像度 800 × 600 では画面幅の 1/8 を占めますが、1024 × では画面幅の 1/8 を占めます。 768 というと、約 1/10 にすぎません。したがって、フォントサイズを定義するときにピクセルを単位として使用すると、ユーザーが表示解像度を 800 から 1024 に変更すると、ユーザーが実際に見る文字が「小さく」（自然長単位）なり、不鮮明になる場合があります。 、ブラウズに影響します。
pt はポイントで、印刷業界で一般的な単位で、1/72 インチに相当します。 ptの正式名称はポイントですが、中国語では「ポイント」とは言いません。正確には1/72インチの大きさで長さの絶対単位である特殊な印刷単位「ポンド」です。
ここで [継承] について注意する必要がある点があります。幅、高さ、行の高さなどの属性を設定するために em を使用する要素の場合、そのサブ要素は em ではなく、その計算値を継承します。これは、数値を使用するのとは異なります。単位を追加する代わりに、その子要素はパーセンテージを継承し、子要素は独自のフォント サイズに基づいて対応する属性値を計算します。具体的には、次の例を見てください:
<div style="line-height:1.5em;font-size:16px;background-color:yellow;">父元素内容 <div style="font-size:40px;background-color:red"> Web前端开发 </div></div>
em を使用する場合、最も外側の親要素の行の高さは 1.5*16px=24px であり、その子要素はその行の高さを継承します。その効果は次のとおりです。
はい、40px>24px であるため、フォントが「オーバーフロー」していることがわかります。単位を追加しない場合:
rrree
効果は次のとおりです:
行の高さは独自のフォント サイズに従って計算され、「比率」のみが継承されます。
rem - 相対ルート要素
<div style="line-height:1.5;font-size:16px;background-color:yellow;">父元素内容 <div style="font-size:40px;background-color:red"> Web前端开发 </div></div>
IE9 以降および最新のブラウザーはすでにそれをサポートしています。
rem は Web アプリ開発に非常に適しています。Web アプリでの具体的なアプリケーションについては、次を参照してください:
Web アプリ革命 rem
梦の宇 – モバイル H5 レイアウト百科事典 - rem フレックスボックスの詳細説明
フレックスボックス - クイック レイアウト Artifact_flexbox 、CSS3、レイアウトtutorial_w3cplus
vw および vh - ブラウザ ウィンドウを基準にして
どちらのユニットも IE10 以降と最新のブラウザーでサポートされています。
vmin と vmax
IE10 以降と最新のブラウザはすでに vmin をサポートしています。Webkit ブラウザは以前は vmax をサポートしていませんでしたが、現在はすべての最新のブラウザが vmin をサポートしていますが、IE は vmax をサポートしていません。
ex と ch
ch 文字の幅 0
font-family が変更されると、これら 2 つの単位の値が変わります。も変化し、フォントが異なれば動作も異なります。 IE9 以降と最新のブラウザではすでにサポートされています。
Reference: 7 CSS Units You Might Not Know About
あなたが気づいていないかもしれない CSS ユニット
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
