1 はじめに
フロントエンド開発では、px、em、rem など、さまざまなタイプの長さの単位に遭遇することがあります。
全長の単位は 2 つのカテゴリに分類されます。
絶対的な長さの単位には、in、cm、mm、q、pt、pc、px が含まれます。
相対長の単位には、em、rem、%、vw、vh、vmax、vmin、vm、ch、ex が含まれます。
2) 絶対長さ
長さの絶対単位は、実際の物理的なサイズを反映する固定値です。絶対的な長さの単位は出力メディアに依存し、環境 (モニター、解像度、オペレーティング システムなど) には依存しません。
1.px ピクセル (ピクセル)
px は実際にはピクセルを意味し、正式名はピクセルで、画像の基本サンプリング単位です。モニターやプリンターなど、デバイスが異なれば画像の基本単位も異なります。私たちが通常言うモニターの解像度は、モニターの物理的な解像度ではなく、デスクトップによって設定された解像度を指しますが、表示効果が最高であるため、現在ではデスクトップの解像度と物理的な解像度はほぼ同じです。したがって、一般に、ピクセルはディスプレイの解像度に対応します。このように、pxを使用すると、異なるコンピュータの解像度に合わせて調整する必要があり、少し面倒であるという問題が発生します。
px の最小単位は 1 であるため、10 進数の測定は意味がありません。
モニター画面の解像度を基準とします。pxとは写真の最小の点のことで、ビットマップはその点が数万個集まって構成されています。例えば、よく聞くコンピュータのピクセルは1024x768で、つまり横1024ピクセル、縦1024ピクセルということになります。 . は 768 ピクセルです。
2.pt (ポイントポンド)
物理的な長さの単位。1 インチの 72 分の 1、pt=1/72 (インチ) を指します。
in:インチ(インチ)、絶対長さの単位
cm：センチメートル（センチメートル）、絶対的な長さの単位。
mm: ミリメートル、絶対長さの単位。
質問: 1/4mm
pt：ポイント（Point）、約1/72インチ、絶対的な長さの単位。
pc: パイカ、約 6pt、1/6 インチ、絶対的な長さの単位。我が国の新4号リードタイプと同等のサイズです。
px: ピクセル (ピクセル)、デバイスの長さの単位に相対し、ピクセルはディスプレイの画面解像度に相対します。たとえば、WONDOWS ユーザーが使用する解像度は通常 96 ピクセル/インチです。MAC ユーザーが使用する解像度は通常、1 インチあたり 72 ピクセルです。
変換率: 1in = 2.54cm = 25.4mm = 101.6q = 72pt = 6pc = 96px
3) 相対的な長さ
相対的な長さのベンチマークがあります
1.em
コンテナーの font-size プロパティを基準にして、font-size プロパティが設定されていない場合は、ブラウザーのデフォルトのフォント サイズを基準とします。
「times」に相当します。たとえば、現在の div のフォント サイズが 1.5em に設定されている場合、現在の div のフォント サイズは次のようになります。
フォント サイズは、現在の div によって継承されるフォント サイズ * 1.5 倍です。
「1.234em」のように小数点以下3桁まで指定可能
一般的なブラウザのデフォルトのフォントサイズは16pxなので、1em = 16px、2em = 32pxとなります。
ユーザーがブラウザの UI コントロール (ページのズーム) を使用してテキストのサイズを変更すると、ページ全体もズームイン (またはズームアウト) されます。互換性: 良い
例：
em の機能を示すテキストを 3 つのフォント サイズでブラウザに出力します。
<!DOCTYPE html>
<html lang="ja">
<頭>
<meta charset="UTF-8">
<meta http-equiv="X-UA 互換" content="IE=edge">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>体験</title>
<スタイル>
<スタイル>
.div{font-size:30px;}
.p{font-size:2em;}
.span{font-size:0.5em;}
</スタイル>
</スタイル>
</head>
<本文>
<div class="div">div タグ内のテキスト サイズは 30px です。
<p class="p">P タグ内の文字サイズは 2rem です
<span class="span">span タグ内のテキスト サイズは 0.5rem です</span>
</p>
</div>
</body>
</html>
ブラウザの表示内容
2.レム
r はルートの意味で、ルート ノードの font-size 属性を基準にしてスケールします。
システムでは、ネストされた関係内の要素のフォント サイズは、常にルート ノードの font-size プロパティに従ってスケーリングされます。
ルート要素が変更されている限り、すべてのフォント サイズを比例的に調整でき、レイヤーごとにフォント サイズが複合する連鎖反応も回避できます。互換性: IE9+、Firefox 3.6+、safari5.0+
例：
rem の機能をデモンストレーションするために、ブラウザーに 3 つのフォント サイズでテキストを出力します。
<!DOCTYPE html>
<html lang="ja">
<頭>
<meta charset="UTF-8">
<meta http-equiv="X-UA 互換" content="IE=edge">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>レムを体験</title>
<スタイル>
<スタイル>
html{font-size:16px;}
.div{font-size:30px;}
.p{font-size:1rem;}
.span{font-size:0.5rem;}
</スタイル>
</スタイル>
</head>
<本文>
<div class="div">div タグ内のテキスト サイズは 30px です。
<p class="p">Pタグ内の文字サイズは1remです
<span class="span">span タグ内のテキスト サイズは 0.5rem です</span>
</p>
</div>
</body>
</html>
ブラウザの表示内容
3.% パーセント
大まかに言えば、これは親要素を基準としていますが、あまり正確ではありません
1) 通常の位置決め要素の場合、それは私たちが理解している親要素です
2) 位置の場合: 絶対; 要素は位置決めされた親要素に対して相対的です
3) 位置: 固定; 要素は ViewPort (ビジュアル ウィンドウ) を基準にしています
4.vwとvh
Vw と vh はビューポートの単位です ビューポートとは何ですか? 名前が示すように、ビューポートは目に見えるウィンドウです。
次の 2 つの状況があります。
1. PC 側でのビューポートとは、PC 側のブラウザの表示領域を指します。
2. モバイル端末には、Layout Viewport (レイアウト ビューポート)、Visual Viewport (ビジュアル ビューポート)、Ideal Viewport (理想ビューポート) の 3 種類のビューポートがありますが、これら 3 つのビューポートの違いについてはここでは説明しません。 . レイアウト ビューポート (レイアウト ビューポート) を指します。
Vw と vh はブラウザ ウィンドウのサイズに基づいており、ディスプレイの解像度には影響されません。驚くべきことではないでしょうか? これは、現在、さまざまなコンピューターの適応解像度について心配する必要がないことを意味します。 。
ビューポート (視点) の幅または高さ。1vw はビューポートの幅の 1% に等しく、1vh はビューポートの高さの 1% に等しくなります。互換性: 上位バージョンのすべてのブラウザがサポートされています。
例: ビューポートは vw の 100 単位に分割され、画面の幅は 375px、1vw=3.75px; ビューポートは vh の 100 単位に分割され、画面の高さは 1200px、1vh=12px;
vw、vh、% パーセントの違い:
(1) % は親要素のサイズに対して設定される比率で、vw と vh はビューポートのサイズによって決まります。
(2) vw と vh の利点は高さを直接取得できることですが、体の高さを設定しないと % で正確に可視領域の高さを取得することは不可能なので、これは非常に良い利点です。
(3) 画面の背景が完全に水平および垂直になる問題については、ipx で % を使用すると安全な空白領域ができる可能性があります。
(4) vh はビューポートの高さを基準にして計算されたサイズです。全画面を考慮する必要があり、ビューポートの高さが大きすぎます。
(5) vw と vh は本質的に両方とも使用できます。ボックスの幅と高さを vw と vh と混合しないでください。
注:ビューポート単位は % 単位とは異なります。ビューポート単位はビューポートのサイズに依存し、ビューポート サイズのパーセンテージに従って定義されます。一方、 % 単位は要素の祖先要素に依存します。
例：
ブラウザにピンク色の長方形を描画します。幅はブラウザの幅、高さはブラウザの高さの半分です。
ブラウザ ウィンドウのサイズを変更しても (ページを拡大または縮小するのではなく)、ブラウザの幅と高さに対するピンクの四角形の幅と高さの比率は変わりません。
vw と vh が何をするかを示します。
<!DOCTYPE html>
<html lang="ja">
<頭>
<meta charset="UTF-8">
<meta http-equiv="X-UA 互換" content="IE=edge">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>vw と vh を体験してみよう</title>
<スタイル>
。箱 {
幅: 100vw;
高さ: 5 0vh;
背景色: ピンク;
}
</スタイル>
</head>
<本文>
<div class="box"></div>
</body>
</html>
ブラウザの表示内容
5.vmin vmax
vmin は現在の vw と vh の小さい方の値、vmax は現在の vw と vh の大きい方の値です。
モバイルページ開発を行う場合、vwとwhを使用してフォントサイズを設定(例：5vw)すると、縦画面と横画面で表示されるフォントサイズが異なります。
vmin と vmax は現在、vw と vh が小さく、vw と vh が大きいためです。ここでは vmin と vmax を使用できます。横画面でも縦画面でも文字サイズを一定にします。
例
ブラウザのサイズを変更し続けると、ピンクの長方形のサイズが変化し続けることがわかります。vmin の役割を示します。
<!DOCTYPE html>
<html lang="ja">
<頭>
<meta charset="UTF-8">
<meta http-equiv="X-UA 互換" content="IE=edge">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>vmin を体験してみよう</title>
<スタイル>
。箱 {
幅: 50vmin;
高さ: 100vmin;
背景色: ピンク;
}
</スタイル>
</head>
<本文>
<div class="box"></div>
</body>
</html>
ブラウザの表示内容
vmax は vmin に似ているので、自分で試してみてください。ここでは詳しく説明しません。
この要素が常にビューポート全体の表示領域をカバーするようにしたい場合は、高さと幅の値を 100vmax に変更します。
。箱 {
高さ: 100vmax;
幅: 100vmax;
}
6.vm
CSS3 の新しい単位。ビューポートの幅または高さの小さい方を基準にします。
最小のものは 100 単位の vm に均等に分割されます。たとえば、ブラウザの高さ 900 ピクセル、幅 1200 ピクセルの場合、ブラウザの最小の高さ、1 vm = 900 ピクセル/100 = 9 ピクセルとなります。
現在の vm の互換性が低いため、ここには表示されません。
7ch
数値0の幅
8.例
英字の小さなxの高さに依存します
4) まとめ
CSS には、px、em、pt、ex、pc、in、mm、cm という 8 つの長さ単位があります。
px、em、rem が主に使用されます。em と rem はさまざまな画面に適応するために使用され、最終的にはレイアウトのために px に変換されるため、精度に制限はありません
1) px は通常、Web ページのレイアウトで使用されます。
2) 一般に、パーセンテージは親要素よりもアダプティブ Web ページ レイアウトでよく使用されます。
3) ビューポート: ブラウザーであるビジュアル ウィンドウ。
calc() は一般的な数学規則を使用しますが、よりスマートな関数も提供します。
四則演算「+」、「-」、「」、「/」を使用します。
パーセンテージ、px、em、rem、その他の単位を使用できます。
さまざまな単位を混合して計算できます。
式に「+」と「-」が含まれる場合、その前後にスペースが必要です。たとえば、スペースなしの「widht: calc(12%+5em)」は誤りです。
式に「」と「/」が含まれる場合、前後にスペースを入れることはできませんが、スペースを入れることをお勧めします。
例: div 要素の高さを現在のウィンドウの高さ (100px) に設定します。
ディブ{
高さ: calc(100vh - 100px);
}
通常、流体レイアウトの幅と高さを設定するために使用されますが、もちろん、 calc() を使用して、要素のボーダー、マージン、パディング、フォント サイズ、および幅属性の動的な値を設定することもできます。
calc() の互換性は次のとおりです。
実際に使用する場合は、ブラウザーの接頭辞も追加する必要があります。
.elm {
/*Firefox*/
-moz-calc(式);
/*クロームサファリ*/
-webkit-calc(式);
/*標準 */
計算();
}
4) Chrome では最小フォント サイズ 12 が強制されます。10 ピクセルに設定されていても、最終的には 12 ピクセルとして表示されます。HTML のフォント サイズが 10 ピクセルに設定されている場合でも、子ノードの rem の計算は 12 ピクセルに基づいています。 、インターネット上の多くの記事で、計算を便利にするために html の font-size を 10 に設定することはあまり望ましくないことが記載されています。
5) vw、vh、vmin、vmax を使用する前提はモバイル端末、つまりそれぞれのスケーリング比を最初に宣言することです。