これは@media only screenと（min-device-width：320px）と（max-device-width：480px）の意味は

Question

Wordpress Twenty ElevenテーマのCSSファイルではどういう意味ですか？

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) 

Answer 1

あなたのウェブサイトは、画面サイズの様々に適応するか、基本的に、それは別のデバイスに異なるスタイルを提供するのに役立ちます支援する技術であるCSS3 Media Queriesと呼ばれています。

あなたは新しいしているので、二つの部分にあなたのメディアクエリを打破してみましょう：

@media only screen 

は、これは私たちがスクリーンを持つデバイスにCSSスタイルを適用することを意味します。キーワードonlyは、以前のブラウザのスタイルシートを表示して電話スタイルシートを表示しないようにするために使用します。

and (min-device-width: 320px) and (max-device-width: 480px) 

は、これは、デバイスが画面の最小320pxと寸法と幅寸法で480pxの最大値を有するときに指定されたCSS のみ適用することを意味するので、非常に明白です。

Answer 2

メディアクエリ仕様では、キーワードのみが提供されています。これは、メディアクエリを古いブラウザから隠すためのものです。同様に、キーワードは宣言の冒頭に来なければなりません。たとえば：メディアクエリを認識しない

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

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

media="only" 

例1

@media (max-width:632px) 

1によるこの1は、適用したい632pxの最大幅を持つウィンドウのために言っている：だから、古いブラウザでは、このように前の例を解釈すべきですこれらのスタイル。そのサイズでは、ほとんどの場合デスクトップ画面よりも小さいものについて話しています。

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

これは、画面と最大幅632pxのウィンドウを備えたデバイスでは、このスタイルを適用すると言っています。これは他の利用可能なメディアタイプとは対照的に画面を指定する点を除いて、上記とほぼ同じです。小さい画面で多くのスマートフォンのためのスタイルに

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

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

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

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

Answer 3

ましょうコードの意味を段階的に理解してください：

あなたのコードは

012542です

@mediaルールは、さまざまなメディアタイプ/デバイスに異なるスタイルルールを定義するために使用されます。

キーワードは、メディア機能を持つメディアクエリをサポートしていない古いブラウザでは、指定されたスタイルが適用されないようにします。現代のブラウザには影響しません。

画面でデバイスにスタイルを制限し、その最小値と最大値の幅が知られている、あなたは画面のメディアタイプにメディア機能をチェーンすることができますするには、次の更なるガイダンスについて

screen and (min-device-width: 320px) and (max-device-width: 480px) 

あなたがMDN website by clicking hereを確認することができます