画面サイズによってフォントサイズがぬるぬる変わるSASS/SCSS。

レスポンシブル 対応が云々とかって言われるようになって画面の幅によって表示が変わるサイトが増えました。

そんなこんなでレスポンシブル た対応なんかをやっていると、一行で表示したい見出しとかがモバイルになった瞬間改行されてあああああ…

みたいな経験をして仕方なく@mediaにフォントサイズを小さくする設定を加えるみたいな経験をした人も多いのではないでしょうか。

解決になるかはわかりませんが、画面サイズによってfont-sizeが自動的に変わるSASS/SCSSを作ってみたのでお役立てください。

理論はそんなに難しくないです。

ブラウザの幅の差 : フォントサイズの差 を考えて

表示されるフォントサイズ = スマホでのフォントサイズ + フォントサイズの差 *(現在の画面サイズ – スマホの画面サイズ)/ 画面サイズの差

といった感じです。言葉で説明すると難しそうなのでまたデモページなんかを作ってわかりやすく説明します。

使い方

SASS/SCSSでフォントを入力する際に@include flex_fontsizeで@mixinを呼び出します。

第一引数にスマホで標示するフォントサイズ、第二引数にブラウザでのフォントサイズ、第三引数にスマホのサイズ、第四引数にブラウザのサイズを入力します。

Social Share Button