スマホとタブレット向けにCSSを調整!
今までサイトのレイアウトはPCをベースに 各種サイズをpxで指定してたのですが、 フォントサイズを基準にしたemで設定し直しました。
スマホとかタブレットは年々表示サイズが大きくなってるのに 今さら気が付いたので、基準となるフォントサイズを 計算で出して最小値と最大値もついでに設定。 CSSもだいぶ進化しましたね。
clamp(1.4rem, 100vw / 26, 2.0rem)
具体的には上記のように。横390pxだと15pxになります。 タブレットだと大きくなりすぎるので上限を設定。 ヘッダーのボタンとイラストのサイズも スマホとタブレットで別々に設定してます。
AIイラストやリベサガプレイ日記のページもなるべく 画像が大きく表示されるように調整。 ここもPCベースのサイズだったからようやく改善!