header_img

ブログ

スマホとタブレット向けにCSSを調整!

今までサイトのレイアウトはPCをベースに 各種サイズをpxで指定してたのですが、 フォントサイズを基準にしたemで設定し直しました。

スマホとかタブレットは年々表示サイズが大きくなってるのに 今さら気が付いたので、基準となるフォントサイズを 計算で出して最小値と最大値もついでに設定。 CSSもだいぶ進化しましたね。

clamp(1.4rem, 100vw / 26, 2.0rem)

具体的には上記のように。横390pxだと15pxになります。 タブレットだと大きくなりすぎるので上限を設定。 ヘッダーのボタンとイラストのサイズも スマホとタブレットで別々に設定してます。

AIイラストやリベサガプレイ日記のページもなるべく 画像が大きく表示されるように調整。 ここもPCベースのサイズだったからようやく改善!

前後のエントリー