リキッドレイアウトでフォントサイズをうまく表示する方法 | お役立ち情報 | 岡山のホームページ制作会社。WEB戦略が得意なホームページ成績上げ屋さん！

リキッドレイアウト、めんどうですよね。

フォントサイズが小さくなりすぎたり逆に大きくなりすぎたり、

かといってレイアウトをメディアクエリで切り替えるのも面倒ですよね。

なんとかならないかな、と思っていたらcss-tricksでこんな記事がありました。

https://css-tricks.com/how-to-get-a-pixel-perfect-linearly-scaled-ui/

今回もゆっくり読み込んでいきましょう

まず前段です。

相対表示(％とかemとか)を利用して動的なスケーリングをおこなっても
ピクセルパーフェクトには程遠く、拡大縮小のすると、テキストの折り返しやレイアウトのずれが生じるとの指摘があります。

たしかにありますよね。

デザインやレイアウトの変更なしに、一律に拡大縮小する方法があるのか、という疑問に対し、二つの回答を用意しています。

1つ目は　cssトランスフォームで拡大縮小する方法。

そして、2つ目が今回紹介する別のやりかたです。

今回のやりかたでは、まず、かっちり決めたい組み合わせを決めます。

今回の例では、画面幅1600pxに対して、文字16pxを基準にしています。

そして下記のようにCSS変数を設定します

--ideal-viewport-width: 1600;　理想の画面幅(pxはつけない)
--current-viewport-width: 100vw;　現在の画面幅
--ideal-font-size: 16;　理想のフォントサイズ(pxはつけない)

現在の画面幅を100vwで取得しています

そして、font-sizeを下記のように設定すると・・・・

font-size: calc(
var(--ideal-font-size) * (var(--current-viewport-width) / var(--ideal-viewport-width)

現在の画面幅に応じたフォントサイズに自動で調整されます！

たとえば、現在の画面幅(=100vw)が、1300pxであれば、

フォントサイズは16 * 1300px / 1600 = 13pxになります

このやり方であれば、レイアウトはそのままで拡大縮小可能です。

けれどたとえば、画面幅が200pxとか、5000pxになった場合、

画面幅に連動していると、文字が小さすぎたり、大きくなりすぎたりします。

それを解消するために、CSSのclump関数を利用しています

--ideal-viewport-width: 1600;　理想の画面幅
--current-viewport-width: 100vw;　現在の画面幅
--min-viewport-width: 350px;　最小の画面幅
--max-viewport-width: 3840px;　最大の画面幅
--ideal-font-size: 16;　理想のフォントサイズ
--clamped-viewport-width: clamp(var(--min-viewport-width), var(--current-viewport-width), var(--max-viewport-width);

クランプした画面幅

clamp(MIN,VAL,MAX)

MIN以下をMINで設定した値に、MAX以上をMAXで設定した値にして、その間は現在の画面幅(100vw)にします。

そして、--current-viewport-widthを--clamped-viewport-widthに変えることで、フォントサイズの上限、下限を指定しています

font-size: calc(
var(--ideal-font-size) * var(--clamped-viewport-width) / var(--ideal-viewport-width)

つまり、幅5000pxのデバイスでウェブアプリを開いた場合、レイアウトは3840pxに固定されるということですね。

よくできていますね！

ただし、注意すべき点としては、基本的にレイアウトそのままで拡大縮小するので、ズームが効かなくなるようです。

その解決方法としてはメディアクエリを利用するようです。つまり、--ideal-viewport-widthと--ideal-font-sizeの設定値を

メディアクエリで切り替えるようにします。

--ideal-viewport-width: 500;　理想の画面幅

--ideal-font-size: 24;　

@media (min-width: 64em) {

--ideal-viewport-width: 800;　理想の画面幅

--ideal-font-size: 42;　

}