レスポンシブ案件では 640px(320px @2x)のデザインカンプが主流でしたが、近年は750px(375px @2x )でのカンプ作成も増えてきました。
マークアップの際、ルート要素(html)のフォントサイズに10px相当となる 62.5% を指定し、各パーツにrem単位を使うのはよくあるパターンです。
chrome の最小フォントサイズは10px
ルートフォントサイズを62.5%にすると、1rem 10px以下にならないので幅や高さ単位のrem使用には注意が必要
今回、375pxベースのデザインをもらい、いつも通りデザインをマークアップしほぼ完了したところ、当初要件外だったハズの320pxサイズに対応しなくてはならなくなり、少しハマッたのでメモ。
375pxベースのデザインと言ってもレスポンシブのマークアップでは、基本リキッドレイアウトで作るので、デザインによっては画面内に収まるのですが、今回はパーツ数が多く密度の高いデザインだったため、小さい画面内にデザインを納めるにはフォントやモジュールパーツを縮小する必要がありました。
そのため、下記のようにメディアクエリとvwを利用して画面サイズの縮小比率に応じてパーツサイズを可変にしたのですが、問題が発生。
html {
font-size: 62.5%;
}
@media (max-width: 375px) {
html {
font-size: 2.66vw;/* 10/375*100 */
}
}
body {
font-size: 1.4rem; /* basic size 14px */
}
.test {
width: 10rem;
font-size: 2rem;
line-height: 2rem;
background-color: #f00;
}
chromeはフォントサイズが 10px 以下にならないため、画面幅が375px以下となりvwサイズが有効になっても width: 10rem; が 100pxより小さくなってくれず、デザインが画面内に収まりませんでした。
※フォントサイズ自体は10pxまでは縮小されます。
ルートフォントサイズを62.5%指定で10pxにしてしまうと、chromeではそれ以下の値になってくれません。
仕方なくブラウザデフォルトの 100%(16px) をルートサイズに使うことにしました。
ただ、10px基準でないと、各cssモジュールパーツの単位として使っているrem の計算が面倒になってしまうため、多少パフォーマンスは犠牲になりますが、保守運用を考慮して calcを使うことにしました（sassが使える案件なら関数で済むのですが）。
calc(10rem/1.6)
※通常の相対単位で再現可能なデザインであれば、%やemの方がラクだと思います。
html {
font-size: 100%;
}
@media (max-width: 375px) {
html {
font-size: 4.26vw; /* 16/375*100 */
}
}
body {
font-size: 0.875rem; /* basic size 14px */
}
.test {
width: calc(10rem/1.6);
font-size: calc(2rem/1.6);
line-height: calc(2rem/1.6);
background-color: #f00;
}
ちなみに、ユーザー依存となりますが、chrome最小フォントサイズはブラウザ設定で変更できます。
以上、ありがとうございました。