CSS_html/css_WEB-ITnose の長さの単位についての深い理解

× カタログ [1]px [2]in [3]cm [4]mm [5]q [6]pt [7]pc [8]em [9]rem [10]ex [11]ch [12]vh [13]vw [14]vmin [15]vmax

前の言葉

この記事では、CSSにおける長さ単位の主な知識を紹介するために、絶対長さ単位と相対長さ単位に分けて紹介します

絶対length 単位

長さの絶対単位は、物理的な測定値を表します

ピクセル px (ピクセル)

ウェブでは、ピクセル ピクセル px が一般的な測定単位であり、他の多くの長さの単位はピクセルに直接マッピングされます。最後にピクセル単位で処理されます

インチ

1in = 2.54px

cm(センチメートル)

1cm = 10mm = 96px/2.54 = 37.8px

mm mm(ミリメートル)

1mm = 0.1cm = 3.78px

1/4 mm q(4分の1ミリメートル)

1q = 1/4mm = 0.945px

pt(ポイント)

1pt = 1/72in = =0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px

フォント関連の相対長単位

em、ex、ch、rem はフォント関連の相対長単位

em

em を表します要素の font-size 属性の計算値 (font-size に使用される場合)。属性自体は、親要素の font-size に相対します。他の属性に使用される場合は、要素の font-size に相対します。要素自体のプロパティの計算値

互換性: IE8 - サポートされていません

<style>.box{font-size: 20px;}.in{    /* 相对于父元素，所以2*2px=40px */    font-size: 2em;    /* 相对于本身元素，所以5*40px=200px */    height: 5em;    /* 10*40px=400px */    width: 10em;    background-color: lightblue;}</style>

ログイン後にコピー

<div class="box">    <div class="in">测试文字</div>    </div>

ex

Ex は、使用されるフォントの小文字の x の高さを指します。ただし、x の高さはフォントによって異なる場合があります。実際、多くのブラウザは em 値の半分を ex 値として受け取ります

[注] ex は実際の微調整によく使われます

<style>/* 浏览器默认字体大小为16px，则2*16=32px，所以根元素字体大小为32px */html{font-size: 2rem;}/* 2*32=64px */.box{font-size: 2rem;}.in{    /* 1*32=32px */    font-size: 1rem;    /* 1*32=32px */    border-left: 1rem solid black;    /* 4*32=128px */    height: 4rem;    /* 6*32=192px */    width: 6rem;    background-color: lightblue;}</style>

<div class="box">    <div class="in" id="test">测试文字</div>    </div>

<style>.box{font-size: 20px;}.in{    font-size: 1ex;    border-left: 1ex solid black;    height: 10ex;    width: 20ex;    background-color: lightblue;}</style>

ch

ch は次と似ています。 ex であり、幅は数値 0 として定義されます。数字の0の幅が決まらない場合は、em値の半分をch値とします

互換性：IE8非対応

[注意] chは主に点字写植に実際に使用されます

宋体微软雅黑arialserif<div class="box">    <div class="in" id="test">测试文字</div>    </div>

<script>var aBtns = document.getElementsByTagName('button');for(var i = 0; i < aBtns.length; i++ ){    aBtns[i].onclick = function(){        test.style.fontFamily = this.innerHTML;    }}    </script>

<style>.box{font-size: 20px;}.in{    font-size: 1ch;    border-left: 1ch solid black;    height: 10ch;    width: 20ch;    background-color: lightblue;}</style>

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

最初の包含ブロックのサイズに対する相対的なビューポート関連の長さの値。最初の包含ブロックの幅と高さが変更されると、それに応じて拡大縮小されます。ただし、ルート要素のオーバーフロー値が auto の場合、スクロールバーは存在しないものとみなされます。

ビューポートに関連するユニットについては、vh、vw、vmin、vmaxの4つのユニットがあります

互換性：IE8-非サポート、IOS7.1-非サポート、android4.3-非サポート（vmaxについては、すべてIE ブラウザはサポートされていません)

[注] Blackberry はビジュアル ビューポートを基準にして誤って計算しますが、Safari は奇妙なことに HTML 要素を基準にして計算しますが、コンテンツが HTML に追加されると、これら 2 つの単位も変更されます

vh

レイアウト ビューポートの高さの 1/100

vw

レイアウト ビューポートの幅の 1/100

宋体微软雅黑arialserif<div class="box">    <div class="in" id="test">测试文字</div>    </div>

<script>var aBtns = document.getElementsByTagName('button');for(var i = 0; i < aBtns.length; i++ ){    aBtns[i].onclick = function(){        test.style.fontFamily = this.innerHTML;    }}    </script>

vmin

レイアウト ビューポートの高さと幅の間の最小値 1/100

<style>body{margin: 0;}.box{    /* 实现与屏幕等高的效果 */    height: 100vh;    background-color: lightblue;}    </style>

vmax

レイアウトビューポートの高さと幅の間の最大値の 1/100

<div class="box"></div>