html - メディア クエリで CSS をリセットする

Question

メディアクエリがあるとしましょう..

@media only screen and (min-width: 960px) {
 /*STYLE HERE */
}

このメディア クエリ内の CSS をリセットして、その中の要素がデフォルトのスタイルシートからスタイリングを受け取らないようにすることは可能ですか?

助けていただければ幸いです!!

Answer 1

そのようなことを達成したい場合は、クエリを使用してスタイルシートをロードします。

<link rel='stylesheet' media='screen and (max-width: 959x)' href='mobile.css' />
<link rel='stylesheet' media='screen and (min-width: 960px)' href='desktop.css' />

大規模なプロジェクトでは管理が非常に難しくなるため、スタイル/レイアウトが繰り返される 2 つの異なるスタイルシートを使用することはお勧めしません。

代わりに、基本的なモバイル レイアウト、色、スタイルなどを適用するモバイル ファーストのメイン スタイルシート (またはクエリ) を使用することをお勧めします。次に、残りのシート/クエリ (タブレット -> デスクトップ) のレイアウトをコーディングします。ほとんどの場合、クエリを実行するには、単純な列の調整とパディング/マージン、フォント サイズなどが必要になるため、主なスタイリングのほとんどはどこでも使用されます。