CSSの長さの単位の詳しい説明_html/css_WEB-ITnose

まえがき

長さの単位は、一般的に絶対的な長さの単位と相対的な長さの単位に分けることができます。 CSS で最もよく知られているのは間違いなく px と em ですが、他にも pt、rem、vw、vh などの測定単位があり、これらをうまく使用することで開発効率が大幅に向上します。この記事では、フロントエンド開発で使用される CSS ユニットとそのアプリケーション シナリオを整理します。

px - ピクセル

px は、ピクセルの略で、ピクセルに基づく単位です。 Web の閲覧中、画面上のテキストや画像は画面解像度に応じて変化します。幅 100 ピクセルの画像は、解像度 800 × 600 では画面幅の 1/8 を占めますが、1024 × では画面幅の 1/8 を占めます。 768 というと、約 1/10 にすぎません。したがって、フォントサイズを定義するときにピクセルを単位として使用すると、ユーザーが表示解像度を 800 から 1024 に変更すると、ユーザーが実際に見る文字が「小さく」（自然長単位）なり、不鮮明になる場合があります。 、ブラウズに影響します。

pt——ポンド

pt はポイントで、印刷業界で一般的な単位で、1/72 インチに相当します。 ptの正式名称はポイントですが、中国語では「ポイント」とは言いません。正確には1/72インチの大きさで長さの絶対単位である特殊な印刷単位「ポンド」です。

em - 親要素を基準としたもの

em 単位は、使用されているフォント サイズを指します。ページ上の親要素のフォント サイズを考慮して、1 つの要素を調整することですべての要素のサイズを比例的に変更できます。スケーラブルなスタイル シートを作成する場合などに、自由に拡大縮小できます。

ここで [継承] について注意する必要がある点があります。幅、高さ、行の高さなどの属性を設定するために 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 - 相対ルート要素

rem は、ルート要素 (ルート要素) のフォント サイズを指します。これは、親要素のフォント サイズが変更されると変更され、親要素と子要素の間のフォント サイズ計算の複雑さを軽減します。ルート要素のデフォルトのフォント サイズは 16px であるため、計算を容易にするために、次のように設定できます:

<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 - ブラウザ ウィンドウを基準にして

vh はビューポートの高さの 1/100 に等しい。たとえば、ブラウザの高さが 900px の場合、1vh で取得される値は 9px になります。同様に、表示ウィンドウ幅が750pxの場合、1vwで得られる値は7.5pxとなります。このユニットは、ビューポートに合わせて変化するフォントや、画面全体に広がる div を設定したい場合に非常に便利です。

どちらのユニットも IE10 以降と最新のブラウザーでサポートされています。

vmin と vmax

vh と vm は常にビューポートの高さと幅に関係します。これとは異なり、vmin と vmax は幅と高さのどちらが大きいか小さいかに応じて、幅と高さの最大値または最小値に関係します。 。たとえば、ブラウザが幅 1100 ピクセル、高さ 700 ピクセルに設定されている場合、1vmin は 7 ピクセル、1vmax は 11 ピクセルになります。ただし、幅が 800px、高さが 1080px に設定されている場合、1vmin は 8px に等しく、1vmax は 10.8px になります。

IE10 以降と最新のブラウザはすでに vmin をサポートしています。Webkit ブラウザは以前は vmax をサポートしていませんでしたが、現在はすべての最新のブラウザが vmin をサポートしていますが、IE は vmax をサポートしていません。

ex と ch

ex と ch の単位の長さは特殊文字によって異なります:

ch 文字の幅 0

ex 小文字の高さ x

font-family が変更されると、これら 2 つの単位の値が変わります。も変化し、フォントが異なれば動作も異なります。 IE9 以降と最新のブラウザではすでにサポートされています。

Reference: 7 CSS Units You Might Not Know About

あなたが気づいていないかもしれない CSS ユニット