可変フォントサイズの指定方法

リキッドさせるみたいなコーディングで悩んだことってありますよね。

デザイナーが1600pxのカンバスサイズで作ったものをそのままのフォントサイズでコーディングするとノートPCなどの小さい端末で見たときにフォントサイズが大きすぎたり、デザインが崩れます・・。

font-sizeをvwで指定するやり方がありますが、ブレイクポイントの調整がめんどくさく効率的ではありません。

remでフォントサイズを指定

rem指定は主流ですよね。remで指定しているサイトが多いかと思います。

remとは「root」+「em」という意味で、
root要素（html要素）に対して相対的にフォントサイズが指定できます。​

html {
 font-size: 62.5%;
}

p {
 font-size: 1.3rem;
}

基準となるサイズを「62.5%」とした場合、「font-size: 1.3rem;」は「font-size: 13px;」に相当します。

解決策

root要素（html要素）に対してvwを指定します。
下記のようなCSSを記述すると、
1600pxまでは画面の幅に合わせてレイアウトがそのままで可変ということが実現できます。

html {
	font-size: 0.625vw;
	@media screen and (min-width: 1601px) {
		font-size: 62.5%;
	}
	@media screen and (max-width: 1000px) {
		font-size: 39.0625%;
	}
	@media screen and (max-width: 750px) {
		font-size: 62.5%;
	}
}

ただそのままvwだと1600px超えてからも大きくなり続けるのでデザインが崩れます。逆に小さい幅だと小さくなり続けるので上記のような指定にするのがベストです。​