メディアクエリscreenとの違いは何only screenですか？
<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" />なぜ使用する必要があるのonly screenですか？screenそれ自体は、画面だけにレンダリングされるのに十分な情報を提供していませんか？
私はこれら3つの異なる方法のいずれかを使用する多くのレスポンシブWebサイトを見てきました。
@media screen and (max-width:632px)@media (max-width:632px)@media only screen and (max-width:632px)回答:
例を1つずつ分解してみましょう。
@media (max-width:632px)これは、max-widthこれらのスタイルを適用したい632pxのウィンドウに対して言っています。そのサイズでは、ほとんどの場合、デスクトップ画面よりも小さいものについて話します。
@media screen and (max-width:632px)これは、デバイスが632pxのscreenウィンドウでmax-widthスタイルを適用するためのものです。これはscreen、他の利用可能なメディアタイプで はなく、最も一般的な他のメディアタイプを指定することを除いて、上記とほぼ同じですprint。
@media only screen and (max-width:632px)これは、これを説明するためのW3Cからの引用です。
キーワード 'only'は、古いユーザーエージェントからスタイルシートを隠すためにも使用できます。ユーザーエージェントは、 'only'キーワードが存在しないかのように、 'only'で始まるメディアクエリを処理する必要があります。
「のみ」のようなメディアタイプはないため、古いブラウザではスタイルシートを無視する必要があります。
うまくいけば、これはメディアクエリにいくつかの光を当てるでしょう。
編集：
キーワードが実際にどのように処理されるかについて、@ hybridsの優れた回答を必ず確認してくださいonly。
medialink
screen、他のメディアタイプにリストされているものなど、現在または将来的に識別されないもの。
以下は、Adobe docsからのものです。
メディアクエリの仕様には、only古いブラウザからメディアクエリを非表示にすることを目的としたキーワードも用意されています。と同様notに、キーワードは宣言の先頭に置く必要があります。例えば：
media="only screen and (min-width: 401px) and (max-width: 600px)"メディアクエリを認識しないブラウザは、メディアタイプのコンマ区切りのリストを期待します。仕様では、ハイフンではない最初の非英数字の直前で各値を切り捨てる必要があると規定されています。したがって、古いブラウザは前の例を次のように解釈する必要があります。
media="only"唯一のメディアタイプがないため、スタイルシートは無視されます。同様に、古いブラウザは解釈する必要があります
media="screen and (min-width: 401px) and (max-width: 600px)"なので
media="screen"つまり、メディアクエリの意味がわからなくても、すべての画面デバイスにスタイルルールを適用する必要があります。
残念ながら、IE 6–8は仕様を正しく実装できませんでした。
すべての画面デバイスにスタイルを適用する代わりに、スタイルシートを完全に無視します。
この動作にもかかわらず、他のあまり一般的ではないブラウザーからスタイルを非表示にする場合にのみ、メディアクエリの前にプレフィックスを付けることをお勧めします。
したがって、
media="only screen and (min-width: 401px)"そして
media="screen and (min-width: 401px)"IE6-8でも同じ効果があります。どちらもこれらのスタイルが使用されないようにします。ただし、それらは引き続きダウンロードされます。
また、CSS3メディアクエリをサポートするブラウザーでは、ビューポートの幅が大きく401px、メディアタイプが画面の場合、両方のバージョンでスタイルが読み込まれます。
CSS3メディアクエリをサポートしていないブラウザーがonlyバージョンを必要とするかどうか、完全にはわかりません
media="only screen and (min-width: 401px)" とは対照的に
media="screen and (min-width: 401px)"として解釈されないようにする
media="screen"これは、デバイスラボにアクセスできる人にとっては良いテストです。
画面が小さい多くのスマートフォン用にスタイルするには、次のように書くことができます。
@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
onlyその文脈でキーワードを使うべきではないでしょう？
@ashitakaが述べた目的を説明していないことを除いて、@ hybridによる回答は非常に有益です。そのコンテキストで唯一のキーワードを使用するべきではありませんよね？」
ここに追加したいのは、サポートされていないブラウザが「スクリーン」から始まるかのように他のデバイススタイルを使用しないようにすることだけなので、「それだけ」スタイルから始まるかのように無視されます。
アシタカに答えてこの例を考えてください
<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)" />「のみ」を使用しない場合でも、デスクトップスタイルもAndroidスタイルの印象的なものとして使用されますが、不要なオーバーヘッドがあるため、引き続き機能します。この場合、ブラウザがサポートしていない場合、最初のスタイルシートを無視して2番目のスタイルシートにフォールバックします。
onlyは、下の@hybridの回答を参照してください。彼はそれを非常によく説明しています。