単位 [CSS]

単位

参考：

<length> | MDN

使い方

• px：1ピクセル
• em：その要素に指定された文字サイズを基準とした長さ／font-size に使う場合は親要素が基準となる
• rem：ルート要素の文字サイズを基準とした長さ
• %：親要素の大きさや行の高さを基準としたパーセント表記
• vw：ビューポートの幅を基準としたパーセント表記
• vh：ビューポートの高さを基準としたパーセント表記
• vmin：vw と vh の小さい方の値
• vmax：vw と vh の大きい方の値
• pt：1/72 インチ (主にフォントサイズの指定に用いる。)

参考：

px、em、rem、パーセントなどの単位や calc の使い方解説 | SHIROMAG

CSS のフォントサイズ指定 px、em、%、rem それぞれの違いと変換 | InfinityScope

ちゃんと使い分けてる？CSS の px, em, rem, %, vw 単位の違い | たかもそ

CSS には vw, vh, vmin, vmax という単位がある | Developers.IO

表示画面に対する パーセント幅を取得する (vw, vh) | ProgLearn

vw, vh, vmin, vmax という CSS で使える単位について | ホームページ制作のアテンド

ビューポート (vw, vh) とパーセント (%)、レスポンシブに適した単位の賢い使い分け方法 | コリス

px, %, em, rem, vw, vh など、CSS の異なる単位が互いにどのように変換されているかが分かる便利ツール | コリス

Viewport Units: vw, vh, vmin, vmax | Can I Use Support tables

パーセント表記

参考：

CSS でのパーセント指定まとめ | while (is プログラマ)

<perentage> | MDN

rem

ルート要素 (html タグ) の文字サイズを基準として長さや大きさを指定する単位

参考：

CSS の基本単位として rem を使うと超絶便利 – Qiita

rem を使って CSS の文字サイズ指定 | NEXMAG

rem 単位とは／仕組みや計算方法 | MaryCore

rem を使ってレスポンシブ対応させる

参考：

rem Hack (butchi.github.io)