CSSを弄って、モバイル用デザインの記事フォントサイズを変更

モバイル用デザインについて、生地のフォントサイズを変更しました。

Verbosaはある程度モバイルでもいけるテーマ

　Verbosaでは、いい感じにモバイルでもデザインを結構保ったまま閲覧することができます。

今まではモバイル用デザインにすると文字が少し小さかった

　読めないほどではないのですが、他のブログなどと比較すると、小さく見えたので、変更しておくことにしました。

どうやってモバイル用デザインを調整するか

　CSSのメディアクエリを使いました。

小さなPC~タブレット・大きなスマホの範囲での設定

@media(max-width: 1024px) and (min-width: 601px){}を使って設定。小さなPCのサイズが1024px、大きなスマホの横幅が601pxというのを調べて。
記事はentry-content内に格納されて表示させるので、それのfont-sizeプロパティを110%にし、程ほどの大きさで表示させるようにしました。

スマホの範囲での設定

スマホは、@media(max-width: 600px){}を使って設定しました。こちらのentry-contentのfont-sizeプロパティは120%です。

調整結果

　一寸小さすぎるかな、と思っていたスマホでの表示がどうにかなりました。やったあ。

その他コメントなど

　このメディアクエリの境界…ブレイクポイントをどうするかについては、色々と議論があるみたいです。私はたまたま検索していて、目に留まったサイトを参考にはしましたが、サイトによってはもっと色々違いがあるんだろうなと思います。いっそcm指定とかを活用してもいいのかな、とも思ったり。まあでも、ブラウザの文字サイズ変更でいかようにでもできる余地を残したいなら、やっぱり%指定とかが無難なのかな。