<h2 id="%25-%2B-rem" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%25-%2B-rem" aria-hidden="true"></a> % + rem</h2>
<div class="code-block-container"><pre class="shiki github-dark" style="background-color:#151e2c;color:#e1e4e8"><code class="code-line" data-line="1">html { font-size: 100%; }
.item { font-size: 1.5rem; }
</code></pre></div><ul data-line="5" class="code-line">
<li data-line="5" class="code-line">ユーザーのデフォルト文字サイズ設定を尊重</li>
<li data-line="6" class="code-line">Ctrl +/- 効く</li>
<li data-line="7" class="code-line">ズーム 効く</li>
</ul>
→ アクセシビリティ重視
<h2 id="px-%2B-rem" data-line="12" class="code-line">
<a class="header-anchor-link" href="#px-%2B-rem" aria-hidden="true"></a> px + rem</h2>
<div class="code-block-container"><pre class="shiki github-dark" style="background-color:#151e2c;color:#e1e4e8"><code class="code-line" data-line="13">html { font-size: 16px; }
.item { font-size: 1.5rem; }
</code></pre></div><ul data-line="17" class="code-line">
<li data-line="17" class="code-line">ユーザーのデフォルト文字サイズ設定を上書き</li>
<li data-line="18" class="code-line">Ctrl +/- 効く</li>
<li data-line="19" class="code-line">ズーム 効く</li>
</ul>
→ デザイン再現性とアクセスビリティのバランス
<h2 id="%25-%2B-vw" data-line="24" class="code-line">
<a class="header-anchor-link" href="#%25-%2B-vw" aria-hidden="true"></a> % + vw</h2>
<div class="code-block-container"><pre class="shiki github-dark" style="background-color:#151e2c;color:#e1e4e8"><code class="code-line" data-line="25">html { font-size: 100%; }
.item { font-size: 2vw; }
</code></pre></div><ul data-line="29" class="code-line">
<li data-line="29" class="code-line">ユーザーのデフォルト文字サイズ設定を無視</li>
<li data-line="30" class="code-line">Ctrl +/- 効かない</li>
<li data-line="31" class="code-line">ズーム 効く</li>
</ul>
→ レスポンシブ微調整 (<code>clamp</code>などと併用)

font-sizeの指定

% + rem

px + rem

% + vw

Discussion