ディスプレイの幅に基づいてスタイルを変更するためにメディアクエリを正しく使用するにはどうすればよいですか？

Question

モバイルデバイスで違ったスタイルにしたいと思っています。 スタイルは、多くのスタイルを含むスタイルシートにあります。

スタイルはこのようなものです：

.header_wrapper{ 
    background-image:bla bla bla; 
} 

は私が480PXを言うよりも狭い幅で、モバイルデバイスに示すbeeingてたときに上記のスタイルはNO背景イメージを持たないようにしたいですか？ （幅の単なる推測が、良い幅を示唆して自由に感じる）：

.header_wrapper{ 
    background-image:none; 
} 

1つのスタイルシートからすべてこれを行うことが可能ですか？または、1つのスタイルを変更するだけで、スタイルシート全体をコピーする必要がありますか（たくさんのスタイルがあります）、スタイルシートをWebサイトに追加する必要がありますか？

優先順位はどの位ですか？

Answer 1

メディアクエリを使用して1つのスタイルシートからこれをすべて実行することができます。

CSSは次のようなものになるだろう：これは、以前のスタイルをオーバーライドすることを確認するために、スタイルシートの末尾に配置する必要があります

@media screen and (max-device-width: 480px) { 
    .header_wrapper{ 
     background-image:none; 
    } 
} 

。

オーバーライドするスタイルが多い場合は、メディアクエリを使用して別のスタイルシートにリンクすることもできます。

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