1.CSSの長さの単位
CSS では、多くの値が値として長さを使用します。ボックス モデルの属性は、幅、高さ、マージン、パディング、ボーダーなどの明らかな値属性です。さらに、オフセット オフセット、ボックスシャドウのサイズまたはフォント サイズ、間隔など、値が長さの値である CSS 属性も多数あります。CSS には多くの長さの単位があります。以下で説明します。長さの単位とその用途について。
2. 簡単な紹介(長さの単位は何ですか:)
CSS には、絶対長と相対長の2 種類の長さ単位があります。
絶対長: px、in、cm、mm、pt、pc;
相対長: em、rem、ex、vh、vw、vmin、vmax、%、fr。
3. 詳細な紹介
1. 長さの絶対単位
絶対長単位は実際の物理サイズを表し、そのサイズは固定されており、他の要素のサイズの変化によって変化することはありません。次の表に、CSS でサポートされている絶対長単位を示します。
px: ピクセルは画面の解像度に関連しており、他の要素のサイズの変化によって変更されることはありません。たとえば、Windows の場合は解像度です。 Mac ユーザーが使用する解像度は 96 ピクセル/インチですが、一般的な JavaScript 言語の単位はピクセルです。
div{幅:200px;}in:inch は物理測定ファイルですが、CSS フィールドでは、インチがピクセルに直接マッピングされているだけです。 (1インチ == 2.54cm == 96ピクセル)
div{幅:2インチ;}c m: センチメートルは、物理測定のよく知られた便利な単位です。これはピクセルにもマッピングされます。 (1cm == 37.8px)
div{幅:20cm;}mm: ミリメートルは、小さな桁の物理的な測定単位です。 (1mm == 0.1cm == 3.78px )
div{幅:200mm;}p t: ポイントも物理的な長さの単位です。 (1pt == 1/72インチ == 96/72ピクセル)
div{幅:20pt;}pc: パイカは (1pc == 12pt) を除いてポイントと同じです。
div{幅:20pt;}例：
<!DOCTYPEhtml><html><head><title>絶対長さの単位</title><style>.box{width:4in;height:4.5cm;border:2mmsolidblack;font-size:16px;}.pt{font {font -size:2pt;}.pc{font-size:3pc;}</style></head><body><divclass=box>これは 16 ピクセルのフォントです<pclass=pt>これは 2pt フォントです< /p ><pclass=pc>これは 3pc のフォントです</p></div></body></html>提示された結果は次のとおりです。
2. 相対長さの単位
相対長単位は、この単位が固定値ではないことを意味し、その値は他の要素属性 (ブラウザ ウィンドウのサイズや親要素のサイズなど) の影響を受けます。相対長単位はレスポンシブに非常に適しています。次の表に、CSS でサポートされている相対的な長さの単位を示します。
em: em は、現在のオブジェクト内のテキストのフォント サイズを基準とした相対単位です。現在の行内のフォント サイズが設定されていない場合は、ブラウザのデフォルトのフォント サイズを基準とします。当初、植字の測定は現在のフォントの大文字 M のサイズに基づいて行われます。フォントファミリーが変更されてもそのサイズは変わりませんが、フォントサイズが変更されるとそのサイズは変わります。 em は親要素のフォント サイズを継承します。 (以下に em と rem の例があります)
CSS ルールなし: (1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm)
div{幅:40em;}re em: rem は em と同様の相対単位ですが、サイズの計算にカスケード方式を使用する em とは異なり、rem は常にルート要素 (root{} など) に対して相対的です。この相対単位の方が使いやすいです。
div{幅:40レム;}例: 文字の高さを基準にした相対的な長さの単位。デフォルトのフォント サイズ。 em とは異なり、em はフォントファミリーを変更しても変更されませんが、単位の値とそのフォントには特別な制約関係があるため、ex 単位は変更されます。
div{幅:40ex;}ch: ch の意味は、ch が文字 x の高さではなく文字 0 の幅に基づくことを除いて、x に対する ex の高さと似ています。 1chは数字の0の幅です。フォントファミリーが変わるとchも変わります。
div{幅:40ch;}vw: vw (ビューポイントの幅) は、視覚的な幅の単位 (ウィンドウの幅) です。vw の単位は、すべての値がパーセンテージと非常によく似ています。の vw は、親要素や親要素の幅に関係なく、すべての要素に同じように適用されます。これは、rem 単位が常にルート要素を基準にしているのと似ています。 (以下に vh と vw の例があります)
div{幅:40vw;}vh: vh (ビューポートの高さ) と vw (ビューポートの幅) の単位は同じです。異なる vh は、視覚領域の高さ (ウィンドウの高さ) を基準にしています。
div{幅:40vh;}vmin: vmin の値は、現在の vw と vh のうち小さい方の値です。標準サイズ タイプの使用例では、画面サイズを自分で決定する vw および vh の単位と比較して、vmin の方が有用なメトリクスです。
div{幅:40vmin;}vmax: vmax の値は、vw と vh の間の大きい方の値です。
div{幅:40vmax;}%: パーセント。パーセンテージ単位の長さの値は、同じ属性を持つ親要素の長さの値に基づきます。たとえば、要素の幅が 450 ピクセルで、子要素の幅が 50% に設定されている場合、子要素がレンダリングされます。幅は 225px です。 (すべての親要素に特定の値が設定されていない場合、高さのパーセンテージを設定すると、すべての要素の値が 0 になります)。
div{幅:40%;}fr: グリッド レイアウトで使用される長さの単位。グリッド レイアウトでは、fr を計算に使用することがよくあります。
次のステートメントは、3 行のグリッドを宣言します。最初の行の高さは 30 ピクセル、2 行目の高さも 30 ピクセル、3 行目の高さは 60 ピクセルです。
グリッドテンプレート行:30px1fr2fr;
例：
<!DOCTYPEhtml><html><head><title>相対長さの単位</title><style>.box{width:60vw;height:88vh;border:1exsolidblack;font-size:16px;}.info{font- size:2em;}.ex>span{font-size:3ex;}.ch>span{font-size:4ch;}</style></head><body><divclass=box>これは 16 ピクセルのフォントです<pclass=info>これは 2em のフォントです</p><pclass=ex>x: <span>これは 3ex のフォントです</span></p><pclass=ch>0: <span>これ4ch フォントです</span></p></div></body></html>以下に示します:
3.長さの単位の概要:
(1) まず最初に理解する必要があるのは、画面解像度とは正確には何ですか? 解像度が異なるとピクセルのサイズが異なることがわかっているため、同じ Web ページでも長さの単位として px が使用されます。同時に、解像度が異なると表示サイズも異なります。解像度が低いと、ピクセルが大きくなり、表示されるページも大きくなりますが、ぼやけてしまいます。
(2) 実際には、相対単位であろうと絶対単位であろうと、すべての単位 (画面に表示される場合) は最終的に px 単位に変換されるため、一般的に Web ページを作成する場合、基本単位は pt ではなく px を選択します。また、ブラウザの DPI で表示するために px に変換されます (たとえば、FireFox の DPI が 96 の場合、9pt = 12px)。 pt、cm、in、mm などの単位も px に変換されるため、絶対的であっても相対的であっても、解像度が異なると変化します。長さを 3cm に設定した場合に変化するとは考えないでください。解像度は 3cm のままです。
(3) pt は、特に印刷する場合、依然として非常に便利な単位だと思います。現在、一部の Web ページは、1 ページを表示し、別の方法で印刷するように実装されています。解像度が異なると、印刷結果が異なるため、上記の pt を使用します。ページは同じサイズです。これが絶対単位の最初の特徴ですが、ディスプレイ上でこの単位が表すのは実際の物理的な長さではなく、ページの実際のサイズに応じて調整する必要があることに注意する必要があります。ピクセル (これは解像度に関係します)。
(4) 実際、このように理解できます。px を絶対単位 (ディスプレイ上の絶対単位) と見なし、他の単位はそれに基づいています。em などは、現在のテキスト フォントに対する相対的な高さです (現在のテキストのフォント サイズが 12px で、新しいフォントを 1.5em に設定すると、新しいフォント サイズは 12 * 1.5 = 18px に変換されることに注意してください。em は親要素に対する相対的な高さであるということです。フォントを最初の div で 12px、2 番目のレベルで 1.5em、3 番目のレベルで 1.5em に設定すると仮定すると、実際のフォント表示は、最初のレベルで 12px、2 番目のレベルで 18px になります。 、レベル 3 では 1.5em、18 * 1.5 = 27px。