【mixin】レスポンシブに対応したフォントサイズのmixin

【mixin】レスポンシブに対応したフォントサイズのmixin

レスポンシブサイトを作ってると、PC・スマホ間のことで意外と困るのがフォントサイズ。PC版に合わせようかスマホ版に合わせようか悩みます。
スマホ版に合わせても画面解像度がまちまちなので、相対サイズもどこに合わせようかと困ったりも……。なので、いっそviewportに合わせたvw単位のフォントサイズを指定してしまえばいいのでは?と思ったのが、今回の出発点。

レスポンシブフォントの解説

functionでvwのサイズを定義しとく

やっていることは計算させているだけ……なんですけど。

mixinでFontSizeを作る

pxサイズのときのfont size、1rem(1文字分)のbase フォントサイズ、レスポンシブにしたときのフォントサイズと順に設定。

こうやってやっておけば、PCでもスマホでも意図したとおりにフォントサイズを指定できると思います。

100 views/total