setFontSize2html
ルートの <html> の font-size をビューポートに比例させて設定します。決まった幅（モバイルのデザインでよくある 375px）で作られたデザインが、実際の画面に合わせて拡大縮小されるようになります。rem で組んだモバイルのレイアウトでおなじみの「flexible rem」の手法です。
使い方
ts
import { setFontSize2html } from 'ranuts/utils';
setFontSize2html(); // デザイン幅は既定で 375px
// 別の幅で作られたデザインなら：
setFontSize2html(414);起動時に一度だけ呼んでください。リサイズや画面の向きの変化のたびに自分で走り直すので、ページが生きているあいだは 1 回の呼び出しで足ります。
css
/* 幅 375px のデザインで 200px に描かれたボックス */
.box {
width: 5.33333rem; /* 200 / 375 * 100 */
}API
setFontSize2html(designWidth?)
パラメーター
| パラメーター | 説明 | 型 | 既定値 |
|---|---|---|---|
designWidth | デザインが作られたときの幅（px） | number | 375 |
戻り値
戻り値はありません（void）。副作用として documentElement.style.fontSize を設定し、resize と orientationchange のリスナーを自前で登録します。
補足
- iPad では基準が自動で切り替わります。
currentDevice()が iPad を返したときは、渡されたdesignWidthではなくデザイン幅とアスペクト比が768/1024:768に切り替わります。この関数は既定でスマートフォンのデザインを前提にしており、よくある例外ひとつだけを補正します。 - 後片づけの仕組みはありません。 このライブラリでリスナーを登録するほかのヘルパーと違い、
setFontSize2htmlは解除用の関数を返しません。マウントとアンマウントを繰り返すコンポーネントに閉じるものではなく、ページの一生のあいだに一度だけ呼ぶためのものです。 documentとwindowが要ります。SSR で走りうるなら、呼び出し側で守ってください。- デザインの
pxの値を同じ基準でremに変換する CSS のビルド工程（postcss-pxtorem など）と組み合わせて使います。setFontSize2htmlが設定するのはルートのフォントサイズだけで、スタイルシートを変換するわけではありません。