[翻訳] CSS_html/css_WEB-ITnose における長さの単位の解釈-htmlチュートリアル-php.cn

WEBデザインにおいて採寸は非常に重要です。 CSS には少なくとも 10 種類の異なる測定単位があります。
各ユニットには独自の役割があり、それらを使用してページをさまざまなデバイスで適切に動作させることができます。これらすべての単位に慣れると、要素のサイズをより正確に設定できるようになります。このチュートリアルでは、CSS での単位の使用の違い、いつどの単位を使用するか、およびそれらの使用方法について説明します。

長さの絶対単位

絶対単位は、物理世界における実際の測定値を数値で表現したものです。これらの単位は、画面サイズや解像度には依存しません。その結果、絶対長単位は、デジタルデバイスや解像度が不明な場合には適切に機能しません。このタイプの単位は、印刷などの物理メディアをデザインする場合の使用に適しています。
絶対長さには以下が含まれます

cm(cm)

mm(mm)

in(インチ)

pc(ピカ)

pt(ポイント)

ピクセル(ピクセル)

編集草案の仕様には、最新の単位である 1/4 mm 単位 (q) も含まれており、どのブラウザもまだこの単位のサポートを表明していないことに注意してください。絶対長を使用すると、特定の単位に対応する値が異なる画面で同じであることに気づくかもしれません。これは、画面によって DPI (1 インチあたりのドット数) が異なるためです。高解像度の画面では DPI が高く、画像やテキストが小さく表示されます。
ピクセル (px) は最も広く使用されている絶対単位です。ピクセルは通常、画面上の点として理解されますが、実際はこれよりもはるかに複雑で、測定の最小単位であり、他の単位の基礎としてよく使用されます。
インチ、ミリメートル、センチメートルなどの他の単位は、物理的な寸法を表します。
ポイント (pt)、1/72 インチを意味します。
パイカ (pc)、ボール 1/6 インチを意味します。
次の CSS 部分は 6 つの異なる絶対長単位を使用します:

      p {        border-top: 0.5in solid blue;        border-bottom: 18mm solid green;        border-left: 1cm solid red;        border-right: 40px solid black;        letter-spacing: 0.4pc;        font-size: 20pt;      }

ログイン後にコピー

下の図は操作を示しています

相対長単位

その名前が示すように、固定値はありません。それらの値は、他の所定の値または特性と相対的なものです。相対単位は、幅、高さ、フォントサイズなどの他の基本パラメータに基づいて要素に適切な値を提供できます。
これらのユニットは 2 つのシナリオでの使用をお勧めします。

レスポンシブページを作成するときに提供されます
デジタルメディアで使用するための

対応する値は、設定したフォント、または画面ウィンドウビューの幅または高さによって異なります。
相対単位には、

ex (高さの詳細を見てみましょう

X-height(ex) と文字 (ch) 単位

unit ex が含まれます。これらは開発ではほとんど使用されません。 1ex は、使用されているフォントの小文字「 x 」のサイズと同じです。英語では、1ex

はほとんどの場合、0.5emにほぼ

相当します。ただし、フォントを変更すると、次のように設定されたフォントの高さが em と同等になることがあります。

p {  font-size: 2ex;}

ログイン後にコピー

単位 ch は、「o」文字に基づいて定義されます。 1ch は、フォント

p {  margin: 2ch;}

ログイン後にコピー

の文字「o」を測定することによって定義されます。単位は em で、親要素のフォントサイズまたはベースのフォントサイズと同じです。親要素のフォントサイズが 20px の場合、すべての子要素では 1em=20px になります (翻訳者注: 要素自体はフォントサイズを設定できません)。子要素のフォントサイズは、基本フォントサイズに基づいて調整でき、値は 10 進数にすることができます。

emを使用すると、さまざまな要素のフォントサイズを一定の比率で確保できます。たとえば、親要素に font-size:50px を設定し、子要素の幅を 2em に設定することは、子要素の幅を 100px に設定することと同じです。同様に、子要素に font-size:0.5em を設定することは、font-size:25px を設定することと同じです。 (注: 子要素で em を使用して font-size とその他の属性の両方を定義する場合、このときの em は子要素自体の font-size に基づいて計算されます)。

以下はデモンストレーションです:

<h1>单位em示例</h1><div class="parent">  <p>父元素字体大小为 (20px)</p>  <div class="child">    <p>子元素字体大小设置为 (1.5em;换算为像素为：30px)</p>  </div></div>

ログイン後にコピー

body {  text-align: center;}.parent {  font-size: 20px;}.child {  font-size: 1.5em;}.p {  font-size: 14px;  padding-top: 130px;}

ログイン後にコピー

イラスト

em をネストで使用すると、エラーが発生することがあります。これは、em 値が最も近い祖先要素に依存し、複数レベルのネストの計算がより面倒になるためです。特に、値の計算にルート要素または祖先要素に依存している場合はそうです。以下はネスト時に使用されるemの例です。ドキュメントの基本フォントサイズは 16 ピクセル (ブラウザのデフォルトのフォントサイズ) であると仮定します。

<h1>单位em，元素嵌套的演示</h1><p>下面使用div来嵌套，<br>它们的font-size:1.15em,但它们每一个计算值都在增大。<br>最后一个div里放了一个span,并设置font-size:2em。</p><div>  <p>font-size &ndash; 18.3999996185303px</p>  <div>    <p>font-size &ndash; 21.1599998474121px</p>    <div>      <p>font-size &ndash; 24.3339996337891px        <br><br><span> font-size &ndash; 48.6679992675781px</span></p>    </div>  </div></div>

ログイン後にコピー

body {  text-align: center;  font-size: 16px;  padding: 0 20px;}p, div {  max-width: 800px;  margin: auto;  padding-bottom: 15px;}div {  font-size: 1.15em;}span {  font-size: 2em;}.p {  font-size: 14px;  padding-top: 130px;}

ログイン後にコピー

イラスト:

HTML 内のネストされた要素はフォントサイズを個別に計算することに注意してください。

上記の CSS からわかるように、すべての div のフォントサイズは 1.15em です。ネストしているため、それぞれに対応する実際のフォントサイズは異なります。

Rem

上記のネストされた要素の em 値の問題。

単位はレムなのでちょうどよく解けます。 rem の値は常にルート要素のフォントサイズと等しくなります (HTML ドキュメントのルート要素は html です)。以下はレムの例です。

<h1>rem示例</h1><p>下面使用div来嵌套，<br>它们的font-size:1.15rem,但它们每一个计算值都在增大。<br>最后一个div里放了一个span,并设置font-size:2rem。</p><div>  <p>font-size &ndash; 18.3999996185303px</p>  <div>    <p>font-size &ndash; 18.3999996185303px</p>    <div>      <p>font-size &ndash; 18.3999996185303px        <br><br><span> font-size &ndash; 32px</span></p>    </div>  </div></div>

ログイン後にコピー

body {  text-align: center;}div {  font-size: 1.15rem;}span {  font-size: 2rem;}.p {  font-size: 14px;  padding-top: 130px;}

ログイン後にコピー

Image

注: ネストはまだ存在しますが、フォントサイズの計算には影響しません。

ビューポートの相対的な長さの単位

ビューポートの相対的な長さは、ビューウィンドウまたはビューポートの幅と高さに基づいて決定されます。
ビューウィンドウまたはビューポートは、画面の表示領域または画面上のフレーム空間の領域です。
ビューポートの相対単位には以下が含まれます:

vw: ビューポートの幅 (ビューポートの幅)

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

vmin: ビューポートの幅または高さ、小さい方を選択します

vmax:ビューポートの幅または高さ、大きい方を選択してください

vh と vw

vh は主にビューポートの高さに依存します。1vh はビューポートの高さの 1% に等しく、これは主に要素がベースにする必要がある場合に使用されます。ズーム中のビューポートの高さ。例: ビューポートの高さが 400px の場合、1vh=400/100=4px、ビューポートの高さが 800px の場合、1vh=8px

vw は vh と同じですが、ビューポートの幅によって異なります。

vmin と vmax

vmin と vmax は 2 つの類似した単位であり、どちらもビューポートの幅と高さに依存します。 vmin は小さい方を選択し、vmax は大きい方を選択します。 1vminと1vmaxの値の計算はvwとvhと同じです。

ブラウザのサポート

em,ex,px,cm,mm,in,pt,pc
古いIEを含むすべてのブラウザがサポートされています
ch
Firefox、Chrome 27+、IE 9+、Safari 7+ 、Opera 20+、
rem
現在のすべてのブラウザ、および IE9+。 IE9 より小さいデバイスと互換性を持たせる必要がある場合は、REM-unit-polyfill
vw,wh,vmin
Chrome 20 以降、IE 9 以降、Firefox 19 以降、Safari 6 以降、Opera 20 以降を使用できます。 IE でサポートされている vmin は標準文法ではありません。 vminpoly を使用するか、-prefix-free プラグインを使用できます。
vmax
Chrome 20 以降、Firefox 19 以降、Opera 20 以降、および Safari 6.1 以降には互換性がありません。互換性のために viewport-units-buggyfill を使用できます。