CSS のサイズ単位についての簡単な説明

ブラウザの互換性はどんどん良くなってきています。モバイル端末は基本的にすべてWebKitベースです。CSSのサイズ/長さの単位が異なることが多くなっています。以下にまとめます。

概要

絶対単位

• px: ピクセル
• pt: ポイント
• pc: ピカス
• インチ
• mm: ミリメートル
• cm: センチメートル
• q: 1/4ミリメートル 1/4ミリメートル

相対単位

• %: パーセンテージ
• em: 要素メーターはドキュメントのフォントに基づいてサイズを計算します
• rem: ルート要素メーター ルートドキュメント(body/html)のフォントに基づいてサイズを計算します
• 例: 文書の文字「x」の高さ
• ch: 文書番号「0」の幅
• vh: ビューの高さ 可視範囲の高さ
• vw: 表示幅 可視範囲の幅
• vmin: 表示最小値 表示範囲の幅または高さの小さい方のサイズ
• vmax: 表示最大値 表示範囲の幅または高さの大きい方のサイズ

手術

calc: 四則演算

例:

h1 {
    幅: calc(100% - 10px + 2rem);
}

ユニット比率

1インチ = 2.54cm = 25.4mm = 101.6q = 72pt = 6pc = 96px

詳細

絶対単位

px - ピクセル

ピクセル px はデバイスのディスプレイ画面解像度に相対します。

div { フォントサイズ: 12px }
p { テキストインデント: 24px }

pt ポイント

1 pt = 1/72 インチ

div { フォントサイズ: 10pt }
p { 高さ: 100pt }

pc ピカス

印刷に使われる12ポイントの活字は、我が国の新しい4号鉛活字の大きさに相当します。

div { フォントサイズ: 10pc }
p { 高さ: 10pc }

インチ

div { フォントサイズ: 10in }
p { 高さ: 10インチ }

mm ミリメートル

div { フォントサイズ: 10mm }
p { 高さ: 10mm }

cm センチメートル

div { フォントサイズ: 10cm }
p { 高さ: 10cm }

q 1/4ミリメートル 1/4ミリメートル

div { フォントサイズ: 20q }
p { 高さ: 100q }

相対単位

% パーセント

親要素の幅に対する相対値

<本文>
    <div class="parent">
        <div class="children"></div>
    </div>
</本文>

<スタイル>
.parent { 幅: 100px }
.children { 幅: 66.6% }
/* 子の幅は 66.6px です */
</スタイル>

em要素メートルドキュメントに基づいてサイズを計算します

現在のドキュメント オブジェクト内のテキストのフォント サイズを基準に、フォント サイズが指定されていない場合は親要素から継承され、本文まで続きます。本文が指定されていない場合は、ブラウザのデフォルト サイズになります。

<本文>
    <div class="要素"></div>
</本文>

<スタイル>
体 {
    フォントサイズ: 14px;
}
。要素 {
    フォントサイズ: 16px;
    幅: 2em;
    /* 2em === 32px */
}
</スタイル>

rem ルート要素メーター ルートドキュメント（body/html）のフォントに基づいてサイズを計算します

ルート ドキュメント オブジェクト ( body/html ) 内のテキストのフォント サイズを基準とします。フォント サイズが指定されていない場合は、ブラウザーのデフォルトのフォント サイズが継承されます。

<本文>
    <div class="要素"></div>
</本文>

<スタイル>
体 {
    フォントサイズ: 14px;
}
。要素 {
    フォントサイズ: 16px;
    幅: 2rem;
    /* 2rem === 28px */
}
</スタイル>

ex文書の文字「x」の高さ

「x」文字の高さを基準に、通常はフォントの高さの半分、またはフォント サイズが指定されていない場合はブラウザのデフォルトのフォント サイズを基準にします。

なぜ x なのかは分かりません。

<本文>
    <div class="x"></div>
</本文>

<スタイル>
.x {
    高さ: 1ex;
    オーバーフロー: 非表示;
    背景: #aaa;
}
</スタイル>

ch 文書番号の幅「0」

上記と同じですが、数字「0」の幅を基準としています。

<本文>
    <h1>10 個のゼロを収容できる幅のコンテナを定義します:</h1>
    <div class="0">0000000000</div>
</本文>

<スタイル>
.0 {
    幅：10ch;
    オーバーフロー: 非表示;
    背景: #ccc;
}
</スタイル>

写真で説明：

vh ビューの高さ / vw ビューの幅 - 表示可能領域

可視領域の高さと幅を基準に、可視領域は vh/vw の 100 単位に均等に分割されます。可視領域は親要素ではなく画面の可視領域を指し、パーセンテージはそれを含む最も近い親要素の高さと幅を基準とします。
デバイスの可視範囲が高さ 900 ピクセル、幅 750 ピクセルであると仮定すると、1 vh = 900 ピクセル / 100 = 9 ピクセル、1vw = 750 ピクセル / 100 = 7.5 ピクセルになります。

<本文>
    <h1>記事のタイトル</h1>
    <div class="要素"></div>
    <div class="full-height"></div>
</本文>

<スタイル>
。要素 {
    幅：50vw;
    高さ：80vh;
    /* 画面の高さが 1000px の場合、要素の高さは 800px になり、vw も同様になります */
}
.フルハイト{
    高さ：100vh;
    /* 画面と同じ高さの要素を簡単に実現します */
}
h1 {
    幅：100vw;
    /* 画面と同じ幅のタイトルを設定します。タイトルのフォント サイズはブラウザの幅に応じて自動的に拡大縮小され、フォントとビューポートのサイズを同期させる効果が得られます。 */
}
</スタイル>

vmin / vmax 表示範囲の幅または高さの小さい方/大きい方のサイズ

ブラウザの幅が 1200 ピクセル、高さが 800 ピクセルに設定されていると仮定すると、1vmax = 1200/100px = 12 ピクセル、1vmin = 800/100px = 8 ピクセルになります。

幅を 600 ピクセル、高さを 1080 ピクセルに設定すると、1vmin = 6 ピクセル、1vmax = 10.8 ピクセルになります。

要素を常に画面上に表示したいとします。

。箱 { 
    高さ: 100vmin; 
    幅: 100vmin;
} 

この要素が常にビューポートの表示領域全体を埋めるようにしたいとします。

。箱 { 
    高さ：100vmax; 
    幅：100v最大;
}

要約する

em と rem は実際の制作で最もよく使用する単位です。メディアクエリと組み合わせて使用​​することで、本文のフォントサイズを変更し、レスポンシブデザインを実現できます。vh、vw、vmin、vmax もレスポンシブサイズを簡単に制御するのに役立ちますが、実際の制御性は前者ほど良くない場合があります。ビジネスニーズに合わせて実践してみましょう。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。