現象の説明と再現コード
rem
単位を使ったメディア・クエリーが複数存在し、かつ最後のメディア・クエリー内でvw
単位を使ってテキスト・サイズを変えると、ブレークポイントの解釈がおかしくなる。Mobile Safari v10.3.2で確認でき、以前のバージョンでは不明です。
@media (min-width: 60rem) {
html {
font-size: 200%;
}
}
@media (min-width: 120rem) {
html {
font-size: 1vw;
}
}
最小の再現コードは以上の通りです。min-width: 60rem
なのでiPhone 5sだとマッチしないはずだが、なぜかマッチし、文字サイズが200%になってしまいます。