メディアクエリの「画面」と「画面のみ」の違いは何ですか？

Question

メディアクエリの「画面」と「画面のみ」の違いは何ですか？

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> 
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> 

は、なぜ私たちは 'のみ' を使用する必要があります。 screenは、それ自身がScreen専用にレンダリングするのに十分な情報を提供していませんか？

私は多くの応答性の高いWebサイトを見てきました。小さい画面で多くのスマートフォンのスタイルにはいくつかの使用

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

一部

@media (max-width:632px) 

といくつかの

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

Answer 1

、あなたが書くことができる：

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

古いブラウザをブロックするためにiPhoneを見ることからまたはAndroidの携帯電話スタイルシート、あなたが書くことができる：

@media only screen and (max-width: 480px;) { … } 

はhttp://webdesign.about.com/od/css3/a/css3-media-queries.htm

Answer 2

多くのため、この記事を読むのを1つずつ、あなたの例を分解してみましょう。

@media (max-width:632px) 

この1つは、あなたがこれらのスタイルを適用したい632pxのmax-widthと窓ために言っています。そのサイズでは、ほとんどの場合デスクトップ画面よりも小さいものについて話しています。

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

この1つはscreenで、デバイスのために言っていると632pxのmax-widthとウィンドウがスタイルを適用します。これは、を指定している点を除いて、上記とほとんど同じです。other available media typesのうち最も一般的なものはprintです。

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

これはW3Cから直接引用されたものです。

キーワード 'only'を使用して、古いユーザーエージェントからスタイルシートを非表示にすることもできます。ユーザエージェントは、 'only'キーワードが存在しないかのように 'only'で始まるメディアクエリを処理しなければならない。

"only"のようなメディアタイプは存在しないため、旧式のブラウザではスタイルシートを無視する必要があります。

link to that quoteは、このページの例9に示されています。

これは、メディアクエリに関するいくつかの洞察をもたらします。

EDIT：

onlyキーワードが実際にどのように扱われるかについて@hybrids excellent answerをチェックアウトしてください。

Answer 3

以下は、Adobe docsです。

---

メディアクエリ仕様では、古いブラウザからメディアクエリを隠すために意図されたキーワードonlyを提供します。 notのように、キーワードは宣言の冒頭に来なければなりません。たとえば：

media="only screen and (min-width: 401px) and (max-width: 600px)" 

ブラウザ認識しないメディアクエリはメディアタイプのカンマ区切りのリストを期待する、と仕様は、彼らがではありません最初の英数字以外の文字の直前に各値を切り捨てる必要があると言いますハイフン。

media="only" 

としてだけではそのようなメディアタイプが存在しないので、スタイルシートは無視されていますので、古いブラウザはこのよう先の例を解釈する必要があります。同様に、古いブラウザはつまり

media="screen" 

として

media="screen and (min-width: 401px) and (max-width: 600px)" 

を解釈し、それがどのようなメディアクエリを知らなくても、すべてのスクリーンデバイスにスタイルルールを適用すべきである必要があります平均。

残念ながら、IE 6-8は仕様を正しく実装できませんでした。

すべてのスクリーンデバイスにスタイルを適用するのではなく、スタイルシートをすべて無視します。

この動作にもかかわらず、他の一般的でないブラウザからスタイルを非表示にする場合にのみ、メディアクエリのプレフィックスを付けることをお勧めします。

---

ので、

media="only screen and (min-width: 401px)" 

と

media="screen and (min-width: 401px)" 

を使用すると、IE6-8で同じ効果があります：両方が使用されているから、これらのスタイルを防ぐことができます。しかし、それらはまだダウンロードされます。

また、CSS3メディアクエリをサポートするブラウザでは、ビューポートの幅が401pxより大きく、メディアタイプがscreenの場合、両方のバージョンがスタイルをロードします。

私は

media="screen and (min-width: 401px)" 

とは対照的に、CSS3メディアクエリをサポートしていないブラウザは、必ずそれがあると解釈されていないことを確認するためにonlyバージョン

media="only screen and (min-width: 401px)" 

が必要と思われる完全にわからないんだけど

media="screen" 

これは、広告にアクセスできる人にとっては良いテストですevice lab。

Answer 4

@hyitakaが言った目的を説明していないことを除いて、@hybridによる回答は非常に有益です。「Mobile Firstアプローチを使用するとどうなりますか？そのコンテキストで唯一のキーワードを使用するべきではないでしょうか？」

ここでは、サポートしていないブラウザが他のデバイススタイルを使用しているかのように、スクリーンなし "のスタイルから始まるかのように画面に表示されます。私たちは、デスクトップスタイルもアンドロイドのスタイルを打つが、不必要なオーバーヘッドで使用されるように、「唯一」、それはまだ動作します使用していない場合は愛鷹に答える

は、この例

<link rel="stylesheet" type="text/css" 
    href="android.css" media="only screen and (max-width: 480px)" /> 
<link rel="stylesheet" type="text/css" 
    href="desktop.css" media="screen and (min-width: 481px)" /> 

考えます。この場合、ブラウザがサポートしていない場合は、最初のスタイルシートを無視して2番目のスタイルシートにフォールバックします。