CSS単位変換するガイド：px、rem、em、vw、vh 詳細解説

選択する正しくの CSS単位は编写スタイル表时最も具影響する力の决策の一つ。あなた選択するの単位決定するた元素どのようにで異なる屏幕尺寸间スケーリング、どのように対応用户設定（如ブラウザ字体大小設定する）ならびにレイアウトの予測可能行のために。しかし，多くの開発者出于习惯默认使用ピクセル，誤たことがあるた相対単位提供するの柔軟性とアクセシビリティ优势。このガイドではたすべての主に CSS単位，説明するた何时使用毎種類単位，示すたどのようにでそれ们の間変換する，かつ提供するた现代レスポンシブデザインの实用ベストプラクティス。

理解する CSS単位カテゴリ

CSS単位分のために两大类：絶対単位と相対単位。絶対単位を持つ固定の物理大小，そして相対単位から另一つの参照点派生其計算する值。理解するこれ一違いは做出明智単位選択するのベース。

絶対単位

絶対単位は固定大小の度量。Web 開発する中最も常用の絶対単位はピクセル (px)。其彼絶対単位を含む点 (pt)、厘米 (cm)、毫米 (mm) と英寸 (in)。これらの単位主にに使用される印刷するスタイル表または時にあなた必要とする不随コンテキスト变化の度量时。でに基づく屏幕の CSS 中，px はあなた唯一できるよく使用の絶対単位。

相対単位

相対単位に基づく参照值計算する其最も终值。em 相に対して現在の元素の字体大小，rem 相に対して根元素の字体大小，vw と vh 相に対してビューポート尺寸，百分比相に対して父元素。相対単位はレスポンシブとアクセシビリティ設計するの基石，なぜならそれ们許可するあなたのレイアウト自动适应異なるのコンテキスト。

ピクセル (px)：基準単位

ピクセルは最も直感的の CSS単位，なぜならそれ直接映射まで屏幕ピクセル（で设备ピクセル比側面ありいくつかの注意する事项）。px 值にかかわらずコンテキストどのようにすべて常に同じ，これさせる其予測可能かつ易于理解する。しかし，これ種類予測可能性はあり代价の：に基づくピクセルの尺寸で用户より改ブラウザ默认字体大時間できないスケーリング，これできる作成するアクセシビリティ问题。

何时使用 px

• ボーダー幅：1px ボーダーにかかわらず字体大小設定するどのようにすべて应保持 1px。
• ボックスシャドウ：シャドウ偏移と模糊半径通常最良使用ピクセルもって獲得する一致の视觉效果。
• 細かいディテール：任意のスケーリングできる破悪视觉設計するの值，如細い区切り線または精密にのアイコンの配置。
• 根字体大小：設定する html { font-size: 16px; } として基线は常见パターン，ただしあなたすべき尊重用户のブラウザ默认值。

何时避ける px

避ける使用 px として字体大小、内边距、外边距と应适適用する户設定のレイアウト尺寸。するブラウザ字体大小増やすまで 20px の用户期望すべての文本相应スケーリング，しかしに基づく px の字体大小できない対応此变化。

rem：ルート相対サイズ

) の字体大小。で大多数のブラウザ中，默认根字体大小のために 16px，したがって 1rem = 16px，0.5rem = 8px，2rem = 32px。rem の閉键优势はそれで用户より改ブラウザ默认字体大時間できるスケーリング，させる其になるアクセシビリティの最良選択する。

する px 変換するのために rem

変換する公式とても簡単：するピクセル值除もって根字体大小。

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

62.5% のテクニック

多くの開発者発見する除もって 16 の数学运算とても繁琐。一種のストリーム行の技巧はする根字体大小設定するのために 62.5%，させる 1rem など于 10px。これは以下を簡素化しますた心算：14px に変わる 1.4rem，24px に変わる 2.4rem，などなど。

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

em：コンテキスト相対サイズ

em 単位相に対して現在の元素の字体大小（またはに対して font-size もって外の属性，相に対して其父元素）。これは以下を意味します 1em など于現在の字体大小，em 值で元素嵌套时できる複合。これ種類複合行のために既かもしれない強力もかもしれないさせる人困惑。

複合の問題

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

各嵌套元素すべてできる乘もって字体大小，をもたらす指数関数的な増加。これすぐにはなぜ rem 通常より適合する字体大小。しかし，em であなたしたいする必要があるコンポーネントレベルのスケーリングの特定ユースケース中表现出色。

何时使用 em

• コンポーネントのパディングと外边距：時にあなた希望する间距随コンポーネント字体大小スケーリング时，em させる一切保持比例。もしあなた増やすボタンの字体大小，其内边距できる自动スケーリング。
• メディアクエリのブレークポイント：いくつかの開発者設定に基づく em の断点，なぜならそれ们随用户字体大小設定スケーリング，確保するレイアウトで適切にの内容幅度处适配。
• コンポーネント内のアイコンサイズ：もって em のために大小のアイコンと周围文本按比例スケーリング。

ビューポート単位：vw、vh、vmin、vmax

ビューポート単位相に対してブラウザ窗口尺寸。1vw など于ビューポート幅度の 1%，1vh など于ビューポート高度の 1%。vmin は vw と vh 中较小の一つの，vmax は较大の一つの。これらの単位に対して作成する対応利用可能屏幕空间のレイアウト非常に重要です。

常见ビューポート単位ユースケース

モバイル vh 问题

で移动ブラウザ上，100vh かつ不常になど于可见ビューポート高度。ブラウザのに址栏とナビゲーション控件占用空间，しかし 100vh を含むこれらの控件後面の区域。これは以下を引き起こします全高区域底部内容られる截断。现代 CSS 提供するた dvh（動的ビューポート高さ）として解决方案，それ考慮するた动态ツール栏。または，使用 JavaScript に基づく window.innerHeight 設定する CSS カスタマイズする属性。

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

新しいビューポート単位：svh、lvh、dvh

CSS 引入た三个新規のビューポート高度単位来解决モバイルビューポート问题：

• svh（スモールビューポート高さ）：すべてのブラウザ UI 可见时のビューポート高度（に址栏展開する）。
• lvh（ラージビューポート高さ）：ブラウザ UI 最小化时のビューポート高度（に址栏收起）。
• dvh（動的ビューポート高さ）：現在のビューポート高度，随ブラウザ UI 展開するまたは收起そして变化。

幅度（svw、lvw、dvw）と最小/最大単位（svmin、lvmin、dvmin など）も存で同じの小/大/动态变体。モバイル全画面レイアウト使用 dvh，必要とする保証する内容なし需スクロールする即可表示する时使用 svh，したいする必要がある填充最大かもしれない空间时使用 lvh。

使用 clamp() 実装するフルードタイポグラフィ

CSS clamp() 函数はレスポンシブ排版の游戏规すなわち変革する者。それ受け取る三个值：最小值、首选值と最大值。ブラウザ選択する首选值，しかしする其制限するで最小值と最大值の間。

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

これ種類方法のためにあなた提供するたに基づくビューポートスケーリングの良处，そしてない文本でモバイル变てあまりにも小またはで桌面端变てあまりにも大のリスク。それ消を除いて字体大小正メディアクエリのブレークポイントの需求，显著下げるた CSS 複雑性。

変換リファレンス表

する此表として常见変換するの高速参照。すべての值偽设 16px 根字体大小と 1920x1080 ビューポート。

CSS単位ベストプラクティス

• 使用 rem として字体大小：これは最も重要です规すなわち。に基づく rem の字体大小尊重用户設定かつで全体の適用する中一致スケーリング。
• 使用 em としてコンポーネントの間隔：コンポーネント内の内边距と外边距受益于 em，なぜならそれ们でコンポーネント字体大小变化时按比例スケーリング。
• 使用 px としてボーダーと細かいディテール：不应随字体大小スケーリングの值（如 1px ボーダーとシャドウ偏移）应使用ピクセル。
• 使用百分比としてレイアウト幅：Flexbox レイアウト使用に基づく百分比の列とコンテナ幅度，許可する内容で異なる屏幕尺寸间重排。
• 使用ビューポート単位として全画面要素：主视觉区域、オーバーレイ层と任意の应填充ビューポートの元素受益于 vh と vw。
• 使用 clamp() 実装するフルードタイポグラフィ：用 clamp() の代わりに代字体大小のメディアクエリのブレークポイント，で最小と最大值の間作成する平滑スケーリング。
• 絶対にしないでください用 px 設定する根 font-size：常に使用百分比（如 62.5%）または保持ブラウザ默认值。用ピクセル設定するできるオーバーライド用户のアクセシビリティ設定。
• 保持一致：のために项目選択する単位ストラテジーかつ坚持使用。随机混用単位させるコードライブラリより難維持するとデバッグ。