文字の大きさも幅で変える

01 / 05

箱を直しても文字は大きいまま

幅の条件で並びを変えても、見出しが 40px のままだとスマホでは2行にも3行にも折り返してしまう。

動かすのは箱だけじゃない。文字の大きさも一緒に考えるところまでが幅への対応だよ。

02 / 05

やり方は今までと同じ。ふだんの大きさを書いておいて、狭いときだけ上書きする。

新しい書き方は出てこなくて、@media の中に font-size を置くだけだよ。

.title {  font-size: 40px;}@media (max-width: 670px) {  .title {    font-size: 28px;  }}

03 / 05

ふだんのルールを先、@media をあとに書く。逆にすると、あとから来たふだんのルールが上書きしてしまって効かないんだ。

順番を間違えたときは「書いたのに変わらない」という形で出る。まずCSSの上下を見直そう。

04 / 05

縮めれば収まるけれど、本文が 12px を下回ると読むのがつらくなる。目安はこのくらい。

見出しは大きく減らし、本文はほとんど減らさない。差を保つほうが読みやすさは守れるよ。

.lead {  font-size: 18px;}@media (max-width: 670px) {  .lead {    font-size: 15px;  }}

05 / 05

プレビューの幅を広げたり狭めたりすると、境目で文字がカクッと切り替わる。そこが @media に書いた数字だよ。

ここから書いてみよう。