本稿では、CSSの長さの単位の主な知識を導入するために、単位長さ当たりの絶対的および相対的長さの単位に分割されています
絶対的な長さの単位
絶対測長ユニットは、物理を表します
画素PX（画素）
ウェブでは、画素（PX）は、測定の典型的な単位である、長さの他のユニットの数は、画素に直接マッピングされます。最後に、彼らはピクセル単位で処理されました
中インチ（インチ）
1インチ= 2.54センチメートル= 96px
センチセンチ（センチメートル）
1センチメートル= 10ミリメートル= 96px / 2.54 = 37.8px
ミリメートル（ミリメートル）
1ミリメートル= 0.1センチメートル= 3.78px
1/4ミリメートルQ（四半期-ミリメートル）
1Q = 1/4ミリメートル= 0.945px
点PT（ポイント）
1 = 1PT / 72in = = = 0.0139inスケール ： 1/72 2.54センチメートル=スケール ： 1/72 96px = 1.33px
ピカのPC（パイカ）
1個= 12ptの= 1/6インチ= 1/6×96px = 16pxに
フォント関連相対長さの単位
EMは、元は、chが、REMは、相対的な長さのフォント関連の単位であります
で
計算値EMプレゼンテーション要素の属性のフォントサイズ、フォント・サイズ属性自体の場合、親要素のフォントサイズに関しては、要素自体のフォントサイズに関して、他の特性のために使用されている場合、
<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>=
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<div class="box">
<div class="in">测试文字</div>
</div>
REM
レムは、フォントサイズのルート要素の属性のhtmlのために計算された値であります
互換性：IE8-はサポートされていません
<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>
デフォルトでは、ブラウザのフォントサイズフォントサイズは1rem = 16pxにある16pxに、です。クロムが12ピクセルであるため、100ピクセルにHTMLのフォントサイズ場合、後続の計算を容易にする、最小フォントサイズ10pxのに設定されていません
EX
exは使用小文字のxフォントの高さです。しかし、別のフォントは高さが異なる場合がありますxは。実際には、多くのブラウザは、exのem値値の半分を取ります
注：多くの場合、微調整に使用され、実際に元
<style>
.box{font-size: 20px;}
.in{
font-size: 1ex;
border-left: 1ex solid black;
height: 10ex;
width: 20ex;
background-color: lightblue;
}
</style>
<button>宋体</button><button>微软雅黑</button><button>arial</button><button>serif</button>
<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>
CH
元のCH等は、0幅の数として定義されます。番号0は、幅、CH EM値とした半分の値を決定できない場合
互換性：IE8-はサポートされていません
注：主に点字組版に使用する実際のCh、
<style>
.box{font-size: 20px;}
.in{
font-size: 1ch;
border-left: 1ch solid black;
height: 10ch;
width: 20ch;
background-color: lightblue;
}
</style>
<button>宋体</button><button>微软雅黑</button><button>arial</button><button>serif</button>
<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>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
相対的な長さの単位のビューポートに関連
ビューポートの相関長は、初期包含ブロックのサイズに相対値。最初は高い変更ブロックの幅を含んでいたとき、彼らはそれに応じてスケールします。ルート要素のオーバーフローが自動のときただし、スクロールバーが任意の非存在を仮定します。
ビューポートの関連ユニットVH、VW、VMIN、vmax4単位について
互換性：IE8-は、サポートしていませんIOS7.1-はサポートしていない、android4.3-（すべてのIEブラウザはサポートしていない、VMAX用）をサポートしていません。
注：ブラックベリーのビジュアルビューポートに関連して計算される間違った; HTMLコンテンツが増加した場合や不思議なHTML要素に対して計算サファリ、二つのユニットが変化します
用品
1/100のレイアウトビューポートの高さ
VW
レイアウトビューポートの幅1/100
<style>
body{margin: 0;}
.box{
/* 实现与屏幕等高的效果 */
height: 100vh;
background-color: lightblue;
}
</style>
<div class="box"></div>
VMIN
レイアウトビューポート1/100の最小の高さと幅と
/*类似于contain效果*/
.box{
height: 100vmin;
width: 100vmin;
}
VMAX
最大の高さと幅のレイアウトビューポートとの間の1/100
/*类似于cover效果*/
.box{
height: 100vmax;
width: 100vmax;
}
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
