web-dev-qa-db-ja.com

メディアクエリでの "screen"と "only screen"の違いは何ですか？

メディアクエリにおける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そのものが画面に表示するのに十分な情報を提供していませんか only ？

私はこれら3つの方法のいずれかを使用して多くのレスポンシブWebサイトを見ました。

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

@media (max-width:632px)

@media only screen and (max-width:632px)
csscss3media-queries
436
Jitendra Vyas

あなたの例を一つずつ分解しましょう。

@media (max-width:632px)

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

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

これはscreenを持つデバイスと632pxのmax-widthを持つウィンドウにスタイルを適用するということです。 他の利用可能なメディアタイプscreenであるのとは対照的にprintを指定している点を除けば、これは上記とほぼ同じです。

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

これを説明するために、W3Cから直接引用しています。

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

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

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

うまくいけば、これはメディアクエリにいくつかの光を当てる。

編集：

@hybrids優秀な答えonlyキーワードが実際にどのように扱われるかについては必ずチェックしてください。

500
Matthew Green

以下は Adobe docs からのものです。

メディアクエリ仕様には、キーワードonlyも用意されています。これは、古いブラウザからメディアクエリを隠すことを目的としています。 notと同様に、キーワードは宣言の先頭になければなりません。例えば：

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

メディアクエリを認識しないブラウザでは、メディアタイプのコンマ区切りリストが必要です。仕様では、shouldは、最初の非英数字の直前に各値を切り捨てますハイフンではない文字。したがって、古いブラウザshouldは、前述の例を次のように解釈します。

media="only"

唯一のメディアタイプはないため、スタイルシートは無視されます。同様に、古いブラウザshouldは解釈します

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より大きく、メディアタイプがscreenの場合、両方のバージョンでスタイルがロードされます。

CSS3メディアクエリをサポートしていないブラウザがonlyバージョンを必要とするかどうかは完全にはわかりません

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

とは対照的に

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

として解釈されないことを確認する

media="screen"

デバイスラボにアクセスできる人にとっては良いテストになるでしょう。

214
hybrid

小さな画面を持つ多くのスマートフォン向けにスタイルするには、次のように書くことができます。

@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

40
sandeep

@ashitaka氏が述べたような目的を説明していないことを除いて、@ hybridによる回答は非常に有益です。「Mobile Firstのアプローチを使用する場合はどうなりますか。私たちはその文脈で唯一のキーワードを使うべきではありませんね」

目的は単にサポートされていないブラウザがあたかも "screen"から始まるかのように他のデバイススタイルを使用するのを防ぐことであり、 "only"スタイルから始まるかのように無視されるということです。

アシタカに答えることはこの例を考慮する

<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)" />

「only」を使用しない場合は、デスクトップスタイルもAndroidスタイルの印象的な方法として使用されますが、不要なオーバーヘッドが発生します。この場合、ブラウザがサポートしていない場合は、最初のスタイルシートを無視して2番目のスタイルシートにフォールバックします。

16
Diablo Geto