liquid-sizing

CSS だけで可変のルートフォントサイズ（リキッドサイジング）を実現するスニペット。
@property と tan(atan2(100vw, 1px)) のハックで 100vw の px 数を CSS 内で数値化し、ルートの font-size と --fs-fluid をレンダーブロッキング CSS の段階で確定させる。
JS の読み込み・実行を待たないため、初期表示のちらつき（FOUC）やレイアウトシフト、resize ごとの JS 実行が発生しない。
1rem がビューポート幅に追従するので、rem 指定した要素がそのまま流体スケールする。
導入は静的 CSS の読み込みが推奨で、CSS の経路を触れない環境向けに JS 注入版 liquidSizing() も用意している。

CSS Custom Properties

Property	Type	Default	Description
`font-size (:root)`	`<length>`	`—`	ルートの font-size。1rem がこの値になり、rem 指定の要素がすべて流体スケールする。PC=1440px基準/1680pxで固定、SP=375px基準/414px以降はブレーキ、下限1px
`--fs-fluid`	`<length>`	`0px`	上限なしの vw 相当 px 値。@property <length> 登録済みなので、JS から getComputedStyle で解決済みの px として読める
`--vw-num`	`<number>`	`375`	100vw に含まれる px 数（unitless）。tan(atan2(100vw, 1px)) の結果。三角関数非対応環境ではこの初期値にフォールバックする

Demos

下のプレビューは、リキッドサイジングの font-size 計算をこのボックス内にスコープして適用したもの（ページ全体の :root は変更しない）。ウィンドウ幅を変えると、見本のテキストが拡縮し、モニタの数値が追従する。数値は CSS が算出した値を JS で読み出して表示しているだけで、サイズ計算そのものは CSS が担っている。

1. リキッドサイジング（ライブプレビュー）

ウィンドウ幅を変えると、見本テキストがビューポート幅に応じて拡縮する。実際の導入では下記CSSを読み込むだけで :root に適用され、rem 指定の全要素が同じ挙動になる（推奨）。

Liquid Sizing

Aa 可変文字サイズ

この見本はビューポート幅に応じて拡縮します。ウィンドウ幅を変えて確認してください。

viewport: –
算出 1rem 相当: –

コードを見る

// 素の CSS / WordPress などは <head> で読み込む
  <link rel="stylesheet" href="/path/to/liquid-sizing.css">

  // SCSS パイプライン（生成物の .scss を @use）
  @use 'form-snippets/snippets/liquid-sizing/liquid-sizing.scss';

  // これだけで :root の font-size がビューポート幅に追従し、
  // rem 指定の要素がすべて流体スケールする（JS 不要・ちらつきなし）。
  // なるべくCSSとして先頭に読み込む

liquidSizing() Options

Option	Type	Default	Description
`css`	`string`	`LIQUID_SIZING_CSS`	注入するCSS文字列。既定はスニペット同梱の可変フォントサイズCSS。独自のCSSに差し替え可能
`id`	`string`	`'form-liquid-sizing'`	生成する <style> の id。同じ id なら二重注入せず内容だけ更新する

Demos

1. JS から注入する（フォールバック）

ビルドや CSS の読み込み経路をいじれない環境向けの保険。JS 実行後に先頭へ