リキッドデザインのフォントサイズに困ったらこれ！remとvwで簡単に解決

2019年8月6日 18:09

業務等でレスポンシブのブレイクポイントまではリキッドさせるみたいなコーディングが多くなってきました。
768pxまではリキッドで…みたいに。

wrapperとか使って最大幅1400pxにしても768pxとは倍くらい違うので、当然デザインが崩れる。死ぬ。

かといってfont-sizeをvwで指定しても、1400px超えてからも大きくなり続けるのでデザインが崩れる。死ぬ。
メディアクエリつかって1401pxからのフォントサイズを指定してもいいけど、普通にめんどくさい。
だってvwで指定したとこ全部pxで指定し直さないといけないんだもん。

救世主rem

こいつは死神。

remとはroot emの略。
ちなみにemはM（エム）が基準になっている（正方形でレイアウトされているため）ので、その名前になったらしいです。（ソース）

で、remはというと、実際に見てもらった方が速いかと思われます。

html {
    font-size: 16px;
}

body {
    font-size: 1.0rem; //16px
}

p {
    font-size: 0.75rem; //12px
}

上記のように、htmlに対して記述されたfont-sizeが1.0remだということがわかります。
例でいうと、2.0remは32pxですね。

@media screen and (min-width: 1401px) {
    html {
        font-size: 16px;
    }
}
 
html {
    font-size: 0.71428571vw; //10px / 1400px * 100
}

例えば、デザイナー様から送られてきた.aiファイル上のデザインの横幅が1400pxだったとします（アートボードの横幅とか）。

上記のようなCSSを記述すると、
・1400pxまでは画面の幅に合わせてレイアウトがそのままで可変
・1401pxからはpxの絶対値指定なのでwrapperなどの幅が固定されるのに合わせてフォントサイズの拡大も止まる。
・デザインが崩れない。死なない。

ということが実現できます。

ちなみに、例ではviewportのwidthが1400pxのとき、
1.0rem = 10px となってるので、デザイン上16pxが指定されていたときには

p {
    font-size: 1.6rem;
}

などにします。

特になし。無敵。

追記：
あったわ。Chromeでは最小フォントサイズなるものがあるので（たしかデフォルトでは10px）、そこには注意が必要。