レスポンシブ対応、とりわけフォント関係はホントいろいろあって面倒ですが、今のところの結論をまとめておきます。
目次
pxで統一すればいいじゃない？
という向きも多いと思います。
直感でわかる、悩むことが少ない、大事ですね。
分かりやすいというのは、お客様、代理店様から見ても同じなわけで、
「ここは36pxにしてチョ！」って簡単に指摘できれば、不毛なやり取りが減り、工期も短縮します。
では、なぜ相対値を使うか？
ケースによりますが、スマートフォン用、PC用など、いちいち指定しなくても良い場合があるから。
基準が
- PC：body = 16px
- スマートフォン：body = 14px
として、
h1をpxで指定
- PC：h1 = 32px
- スマートフォン：h1 = 24px
このようにメディア別に指定することになります。
これが面倒だなぁと。
h1を相対値（%）で指定
- h1 = 200%
PCでは換算32px、スマートフォンでは換算28px。
例えば「h1をもっと大きくしてチョ！」って指示された場合、だいたいPC時のことを指しているのでスマートフォンでも大体同じ感じで変更されれば便利かな、と。
レスポンシブの想定があるかどうか？
「スマートフォンではどうしても h1 = 24px じゃないとダメ！」みたいな場合は、素直にそれぞれ指定するしかないですね。
相対値の使用例
em、%
emも%も使い勝手は大体同じ印象。
相対値で一番厄介なのが、継承された子要素を更に大小する場合。
親要素=100%
- 子要素=親要素の80%
- 孫要素=子要素の100%
こういうケースで、孫要素のサイズを親要素のサイズに戻したい場合どうするか。
ul {
font-size: 80%
}
ul ul {
font-size: 125%
}「100% / 80%=125%」
こういう縮尺が出てきて、中にはキリの悪い数字も出てきます。
また「一回り大きく」「バランス良く」など主観的な指定をされることが多くなると思います。
「一回り大きくしました。」⇒「変わってません！」
「もう一回り大きくしました。」⇒「大きすぎます！」
など、不毛なやり取りは避けられないですね。
こんなのがあちこちで発生すると非常に面倒ですが、ここで短気を起こしてpxを使うくらいなら全部pxで統一した方がいい。
rem
最近浸透し始めたので知名度が低く、「コレナニ？」が起きます。
ちょっと前（2018年ころ？）まで非対応ブラウザがあったのですが、もう今は無いでしょう。
フォントサイズの書き方を検索すると、rem推しの記事が多いですね。
後述の「親要素を継承してワケが分からなくなる」といったことが起きにくいです。
/* ---------- ベースサイズ ---------- */
html {
font-size: 5.46875%;
}
body {
font-size: 16rem;
}
h2 {
font-size: 28rem;
}
@media only screen and (min-width: 769px) {
html {
font-size: 6.25%;
}
}基準値の計算
まず、pxとremを同じ感覚で書けるようにするため、1px = 1remになるようにします。
6.25% = 100 / 16 / 10
スマートフォンなどでも同じ比率を保つため、基準値を変えます。
14 / 16 = 87.5%
5.46875% = 6.25% * 87.5%
こうしておくと、
- pc時 ⇒ h2 = 28rem = 28px
- スマートフォン時 ⇒ 同じ比率で縮小
となります。
「コレナニ？」が起きた場合は、「pxと同じです。」と言いましょう。
基準値が気持ち悪い場合
以下でも同じ結果となります。
html {
font-size: 1px;
}
body {
font-size: 14rem;
}
@media only screen and (min-width: 769px) {
body {
font-size: 16rem;
}
}「font-size: 1px」、これだけ見るとかなり無茶な設定に見えますね。
クロームでおかしくなるかな？と思いましたが、現在のバージョンなら問題無し。Mac、iPhone、iPadもOKなようです。
iframeもヤバいかな？！とも一瞬思いましたが、そもそもiframeは表示先のCSSでは制御されませんね。昔、制御しようとして苦労したのを思い出しました。
remの使用範囲
remは長さ／幅の指定にも使えますが、何らかの事情でpx指定に戻したりする場合、一括変換できないですね。
remを使うのはフォントサイズだけ、固定値ならpx、フォントサイズに合わせた余白とかならem、あたりにしておけば変換が楽です。
remでサイズ指定した要素の中身
remで指定した要素の子要素を指定する場合、もちろんremでもいいのですが、
「見出し中のスラッグは見出しの半分」などの場合、h1からh6まで個別に指定する必要があり、
- h1 .slug ⇒ 16rem
- h2 .slug ⇒ 14rem
面倒なので、remで指定した要素の中身は%かemを使っておくといいですね。
- .slug ⇒ 0.5em、50%
この辺の使い分けでメンテナンス性が大きく変わると思います。
継承してややこしくなるのを軽減
以下はremを使えば関係ない話。
大まかなブロックはpxで指定し、p、h1～、など最下要素近辺だけ%指定する。
#main {
font-size: 14px
}
#sidebar {
font-size: 12px
}
#footer {
font-size: 12px
}
@media (min-width: 769px) {
#main {
font-size: 16px
}
#sidebar {
font-size: 14px
}
#footer {
font-size: 12px
}
}あとは、h1～h6、span各種、table・blockquoteとその中身、before、after等の疑似要素、アーカイブのarticle、フォームなどを各々調整。
「%」を使う場合の換算表
良く使いそうなサイズだけ換算表にしてみました。
- 親要素 = 最上段（12px ~ 18px）
- 比率 = 表示したいサイズ（px）/ 16px
他のサイズを基準にすると端数が半端ないです。やはりブラウザデフォルトの16pxが良いようで。
- 親要素が16pxの時、100% = 16px
- 親要素が16pxの時、450% = 換算72px
- 親要素が12pxの時、450% = 換算54px
- 親要素が14pxで、表示を56pxにしたければ、fons-sizeは400%
という感じです。
| 12 | 14 | 16 | 18 | 比率 |
|---|---|---|---|---|
| 54 | 63 | 72 | 81 | 450.0% |
| 48 | 56 | 64 | 72 | 400.0% |
| 42 | 49 | 56 | 63 | 350% |
| 36 | 42 | 48 | 54 | 300.0% |
| 30 | 35 | 40 | 45 | 250.0% |
| 27 | 31.5 | 36 | 40.5 | 225.0% |
| 24 | 28 | 32 | 36 | 200.0% |
| 21 | 24.5 | 28 | 31.5 | 175.0% |
| 19.5 | 22.75 | 26 | 29.25 | 162.5% |
| 18 | 21 | 24 | 27 | 150.0% |
| 16.5 | 19.25 | 22 | 24.75 | 137.5% |
| 15 | 17.5 | 20 | 22.5 | 125.0% |
| 13.5 | 15.75 | 18 | 20.25 | 112.5% |
| 12 | 14 | 16 | 18 | 100.0% |
| 10.5 | 12.25 | 14 | 15.75 | 87.5% |
| 9 | 10.5 | 12 | 13.5 | 75.0% |
| 7.5 | 8.75 | 10 | 11.25 | 62.5% |
表にしてみて改めて思ったのは、
「remでいいじゃん。」
でした。
スマートフォンのベースサイズ
上記例では、スマートフォンを含むタッチデバイス ⇒ 換算14pxにしていますが、さすがに小さいですね。
個人的にはPCと同じ16pxが読みやすい。
ならばベースサイズのメディアクエリも要らないのですが、オーダーとして「15pxにして！」「14pxにして！」というケースはあると思いますので、やはり相対サイズで書いておく方がいろいろ柔軟に対応できそうです。
