CSS における長さ単位の適用の概要-CSSチュートリアル-php.cn

CSS における長さ単位の適用の概要

不言

リリース： 2019-01-24 10:32:18

転載

4297 人が閲覧しました

この記事では、CSS における長さ単位の適用について説明します。必要な方は参考にしていただければ幸いです。

CSS には、width、height、margin、padding、border-width、font-size、text-shadow など、長さの値を受け入れることができるプロパティが多数あります。多くの使用シナリオがあるため、CSS では多くの長さの単位も提供されています。センチメートル (cm) やインチ (in) など、日常生活で使用される単位もあれば、ポイント (pt) やパイカ (pc) など、印刷業界で使用される単位もあります。として: px 。

使用シナリオ

では、これらの属性と単位をどのように組み合わせて使用するのでしょうか?特定のプロパティには特定の単位が必要ですか?実際には、そうではありません。単位は属性とは関係ありません。属性が px の値を受け入れる場合、どの単位も使用できます。 : margin: 5px) の場合は、インチまたはセンチメートルの値 (マージン: 1.2 インチ、マージン: 0.5cm) も受け入れることができ、その逆も同様です。

単位は属性とは関係ありませんが、画面に出力するか紙に出力するかなど、出力媒体と一定の関係があります。推奨単位は、画面に表示する場合と紙に印刷する場合では異なります。次の表に、推奨される使用方法を示します。

##出力媒体推奨時々使用推奨されません画面em、px、%expt、cm、mm、インチ、pcprint

これらの単位は、出力媒体との関係に加えて、長さの値の計算方法に基づいて絶対単位と相対単位に区別できます。

絶対単位

絶対単位 (px、cm、mm、in、Q、pt、pc) は、この単位の長さの値が物理的な長さの値とは異なることを意味します。長さは等しい。たとえば、width: 1cm は現実世界の 1cm の長さに等しい。これは、すべてのメディア上の絶対単位の表示効果が一貫していることも意味する。ただし、これは理想的な状況です。ブラウザごとに表示と CSS 実装が異なるため、多くのデバイスでは絶対単位の表示が正確ではありません。 px と in の関係は 1in=96px であるため、低解像度デバイスでは 1px は 1 ピクセル (px という名前の由来でもあるピクセル) の長さであり、低解像度デバイスでは 1px です。画面の解像度は 1/96 インチより大きいことが多いため、ピクセルから計算される他の絶対単位値は正確ではありません。高解像度デバイス (今日の高解像度スクリーンやプリンターなど) では、絶対単位がより正確に表示されます。上記の理由により、印刷時には絶対単位がより一般的に使用されます。

かつて、CSS ではコンピュータ画面上に絶対単位を正しく表示する必要がありました。しかし、ほとんどのメーカーがこの要件を実装できなかったため、CSS は 2011 年にこの要件を放棄しました。現在、絶対単位は印刷デバイスと高解像度デバイスでのみ適切に動作します。 CSS では、「高解像度」が何を意味するのか明確に定義されていません。ただし、現在、ローエンドのプリンタのドット数は 1 インチあたり 300 dpi、ハイエンドのスクリーンのドット数は 200 dpi であるため、いわゆる「高解像度」はおそらくその中間になります。。

絶対単位の直接変換式は以下に掲載されています:

1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px

ログイン後にコピー

px

CSS で最も一般的に使用される単位として、これについてもう少し説明する必要があります。ピクセル。 px の特性は次のように要約できます。

低解像度デバイスでは 1px = 1 ピクセル、高解像度デバイスでは
、1px = 1/96in、1px は必ずしも 1 ピクセルに等しいわけではありません (たとえば、4.7 インチ iPhone では 1px = 2 ピクセル)。
画像表示の場合、1px = 1。画像ピクセル、例: a 600x400 解像度の写真の CSS の幅と高さは 600 ピクセルと 400 ピクセルです (4.7 インチ iPhone での表示には 1200x800 ピクセルが使用されます)。 #相対単位

相対単位とは、長さの値が他の長さに基づいて計算されることを意味します。相対単位は、フォントベースとビューポートベースに分類できます。

フォントベース

em、ex

最初に em と ex について説明します。em は現在のフォントサイズを表します。要素の

font-size

が

2cm

の場合、

1em は 2cm を意味します。 em は、margin: 1em; text-indent:1.5em のようにサイズを制御するために使用できます。現時点では、これらのサイズは要素のフォントサイズに関連しているため、大きな画面ではフォントサイズ) と小さい画面 (小さいフォントサイズ) は比例して拡大縮小されるため、レスポンシブデザインに使用できます。 em が font-size: 2em のように font-size 属性に直接使用される場合、em は親要素のフォントのサイズとして表されます。 ex はほとんど使用されません。ex 表現のサイズはフォントの x 高さに関係します。 x-height は、フォント内の小文字 (a、c、m、o など) の高さとほぼ同じです。同じ font-size を持つ異なるフォントの x 高さは大きく異なる可能性があるため、ex を使用した場合の効果には大きな不確実性があります。

rem

CSS は 2013 年に新しい単位 rem を作成しました。 rem はルート要素 (html 要素) のフォントサイズを表します。em は要素ごとに異なりますが、rem はすべて同じです。一貫性のある。この機能により、rem はレスポンシブデザインでより広く使用されるようになりました。

ch は、CSS3 で新しく追加された単位であり、現在のフォントの「0」(ゼロ、Unicode 文字 U 0030) の幅を表します。

Viewport Based

vw、wh、vmin、vmax

はすべて CSS3 で新しく追加されたユニットです。 vw、vhはウィンドウサイズに合わせてフォントサイズを調整できます。 vw はウィンドウの幅の 1/100、vh はウィンドウの高さの 1/100 です。また、vw と vh の小さい方を指す vmin があり、その逆が vmax です。これらの単位は、最新のブラウザでサポートされています。