メディアクエリにおける「スクリーン」と「スクリーンのみ」の違いは何ですか? 質問する

例を一つずつ分解してみましょう。

@media (max-width:632px)

これは、632 ピクセルのウィンドウにmax-widthこれらのスタイルを適用することを意味します。このサイズでは、ほとんどの場合、デスクトップ画面よりも小さいものについて話していることになります。

@media screen and (max-width:632px)

これは、632pxのデバイスとscreenウィンドウにスタイルを適用することをmax-width意味します。これは、screenその他の利用可能なメディアタイプ最も一般的なもう 1 つは ですprint。

@media only screen and (max-width:632px)

これを説明する W3C からの引用を以下に示します。

キーワード「only」は、古いユーザー エージェントからスタイル シートを非表示にするためにも使用できます。ユーザー エージェントは、「only」で始まるメディア クエリを、「only」キーワードが存在しないかのように処理する必要があります。

「only」のようなメディア タイプは存在しないため、古いブラウザではスタイル シートは無視されます。

これがその引用へのリンクそのページの例 9 に示されています。

これでメディアクエリについて少し理解が深まるといいのですが。

編集：

ぜひチェックしてください@hybrids 素晴らしい回答キーワードが実際にどのように処理されるかについて説明しますonly。