メディア・クエリーを使ってビューポートの縦横比を判別する。aspect-ratio
では(min|max)-
のプリフィックスを間違えやすいので注意する。
If this text is green, your browser can recognize max-aspect-ratio: 16/9
feature.
16:9以上だが、比率としては以下になるので、max-
プリフィックスをつける。
If this text is green, your browser can recognize min-height: 56.25vw
feature.
56.25vw
でビューポートの9/16のサイズが計算できるので、これをmin-height
で判定して行う。Firefox 33 (多分20)以上でのみ動く。