CSSにおける長さの単位(px,pt,rem,em,ex,vw,vh,vh,vmin,vmax)

CSSには長さ単位を設定する属性が多く,よく使われるpx,emのほかにあまり使われないものもあるが,フロントエンドエンジニアとしても理解する必要がある.
ぜったいながさたんい
px
px(pixel)は実は私たちが最もよく知っている長さの単位であるべきで、スクリーン解像度に対しても、他の単位の基準としてよく使われています.これpx物理機器の画素とは違いますが、機器によって視覚効果がほぼ同じであることを保証するためにpx参照画素を採用しているので、cssの仕様上1pxパソコンディスプレイ上で見ると1/97インチ程度です.
in inはinchesの略で、CSSではpxとの換算関係は

1in == 96px

cm
センチメートルは実际の生活の中で、比较的に広范な単位を运用して、pxとの换算関系は

1cm == 37.8px

mm
比cm小一桁、換算関係は

1mm == 0.1cm == 3.78px

相対長さの単位
相対長さ単位は、その名の通り、その長さは他の長さから算出される.viewport関係するユニットも本来はこの部分に属していたが、差別化のため単品で持ち出した.
em em(font size of the element)は、現在の要素のフォントサイズ(font-size)属性値に対して算出される.ブラウザのデフォルトフォントサイズは16 pxなので、デフォルトでは1em = 16px.現在の要素がフォントサイズを設定していない場合は、親要素のサイズに依存します.親エレメントのサイズも明示的でない場合font-size計算可能なエレメントが見つかるまで上を探します.この単位の一般的な使用シーンは、中国語の段落の最初の段落に2つの字をインデントします.次のようになります.

p {
  text-indent: 2em;
}

フォントの単位と行間を設定するときにemを採用することをお勧めします.これにより、ユーザーはページをスケールするときに、フォントの正常なスケールを保証することができます.
rem rem(font size of the root element)とem少し似ていますが、ルート要素に対して計算されています.htmlエレメントにそのfont-sizeサイズが指定されている限り、後のエレメントはこのサイズを基準として計算されます.互換性については、現在IE 8以外のすべてのブラウザで基本的にサポートされているrem.しかし、互換性のために、このような書き方を採用することがあります.

p {
  font-size: 16px;
  font-size: 1rem;
}

このように、ブラウザがこの属性をサポートしていない場合、自動的に無視されるrem設定されたサイズ.
このユニットは現在もスクリーンの適合によく使われている.メディアクエリやjsコードを利用してルート要素のfont-sizeを動的に設定でき、後続の要素はrem単位で、異なるデバイスでの表示効果を保証できます.具体的にはhttp://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/.
ex
元素フォントのx-heightに対して、これx-height文字xの高さから取った意味.emとは異なり、フォントを変更する場合font-familyを使用する場合em単位の大きさは影響を受けませんがexフォントによって新たなサイズが再計算されます.
ch ex単位と似ていますが、「0」という文字フォントの幅に基づいて計算されます.xこの文字フォントの高さではありません.
viewportビューベースの長さ単位
ビューポート(viewport)は、ブラウザが可視化する領域であり、この可視領域はwindow.innerWidth/window.innerHeightの大きさである.CSSでは,ビュー領域に関連する単位が4つあり,それぞれvw,vh,vmin,vmaxである.これらの単位は、画面の表示領域に依存するため、レスポンスレイアウトやレイアウトにも使用できます.
vw/vh vwviewport's widthの略で、その値がビューポートの幅から算出されていることを示しており、換算関係は1vw1パーセントに等しいwindow.innerWidth.vwと同様、vhビューポートの高さから算出される.
vmin/vmax
この単位は、視域の長さが大きい次元値から算出され、window.innerHeight > window.innerWidthならvmin1パーセント取りwindow.innerWidth、vmax1パーセント取りwindow.innerHeight計算されます.
作者:SCQ 000
リンク:https://www.jianshu.com/p/5d1f811082f2
出典:簡書
簡書の著作権は著者の所有であり、いかなる形式の転載も著者に連絡して授権を得て出典を明記してください.