TIL 23、単位-絶対長、相対長、ビューポート

5152 ワード
相対長さ ぜったいながさ Viewport CSS テキストリンク

ぜったいながさ


px ( 1px = 1/96th of 1 inch )


画面のサイズは絶対長であり、他の要因の影響を受けないが、相対的なサイズはデバイスの解像度に依存するため、固定されている.
複数の環境で統一的に設計され、ブラウザの互換性に優れた構造を採用しています.
デザインの意図を反映するサイトでは、ピクセル単位を使用することをお勧めします.

pt ( 1pt - 1/72 of 1 inch )


パソコンがないからある単位です.
印刷物または文字処理プログラムで使用される最小の標準印刷単位.
使用する装置の解像度が異なるため,W 3 CにおいてもptはWeb開発の推奨単位ではない.
例えば、Windowsでは9 pt=12 px、Macでは9 pt=9 pxとなる.

相対長さ


相対長さは、他の要素のサイズやフォントサイズ、ブラウザなどのサイズによって変化します.
%
親の値のパーセント換算サイズが取得されます.
em
font-size換算値に従います.小数点3桁まで表示できます.
rem
rootのfont-size換算値に従います.
vw
viewportのwidth値から1%の値を計算します.

Em例)

<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      html { font-size: 16px; }
      body { font-size: 1.5em; }
      .a { font-size: 2.0em; }
    </style>
  </head>
  <body>
    <p class="a">Lorem Ipsum Dolor</p>
  </body>
</html>
html要素のサイズは16 px、body要素のサイズは親要素html要素のサイズの1.5倍24 px、段落要素のサイズは親要素body要素のサイズの2倍48 pxです.
16 × 1.5 × 2 = 48

rem例)


ドキュメントの最上位要素(html要素の数倍)のサイズを決定します.
.a { font-size: 2.0em; } 上記の例から単位をremに変更すると、
16 * 2 = 32
fontサイズは32 pxです.
つまり、ブラウザが大きく変更されるたびに値が変更されます.

CSSビューポートを基準とした4単位があります。(vh, vw, vmin, vmax)


vh:Viewport Height viewportの高さに基づいています.1 vhはビューポートの高さの1%に等しい.
vw:Viewport Widthに基づく.1 vwはビューポート幅の1%に等しい
vmin:Viewport Minimumの高さと幅の小さいサイズに基づいています.ビューポートの高さが幅より小さい場合、1 vminはビューポートの高さの1%に相当します.同様に、ビューポートの幅が高さより小さい場合、1 vminはビューポートの幅の1%に等しい
vmax:Viewport Maximumの高さと幅の大きい側の寸法に基づいています.ビューポートの高さが幅より大きい場合、1 vmaxはビューポートの高さの1%に相当します.同様に、ビューポートの幅が高さより大きい場合、1 vmaxはビューポートの幅の1%に等しい
ビューポート幅1200 px、高さ1000 pxの場合、10 vwは120 px、10 vhは100 pxです.このビューポートの幅は高さより大きいため、10 vmaxは120 px、10 vminは100 pxである.
ビューポート単位は%指定のように見えますが、ビューポート単位と%の間には大きな違いがあります.%指定した場合、子要素の幅と高さは親要素の幅と高さに依存します.
ビルダーパトロール
Arrow Function