css - メディアクエリの最大幅は、ビューポートのサイズまたはウィンドウのサイズに関連していますか?

Question

メディア クエリの最大幅がビュー ポート サイズまたはウィンドウ サイズに関連するかどうか疑問に思っています。

たとえば、次のメディア クエリがあります。

@media screen and (max-width: 360px){}

ビュー ポートのサイズが 360px またはウィンドウのサイズが 360px の場合、このメディア クエリは動作しますか?

Answer 1

ビューポートです。これは仕様に記載されています：

「幅」メディア機能は、出力デバイスのターゲット表示領域の幅を表します。連続メディアの場合、これは (CSS2 のセクション 9.1.1 [CSS21] で説明されているように) ビューポートの幅であり、レンダリングされたスクロール バー (存在する場合) のサイズを含みます。

これは、フレームセットや iframe などのメイン ブラウザー ビューポート内のサブビューポートにも適用されます。したがって、iframe の幅が 360px 以下の場合、メディア クエリはその iframe 内にも適用されます。