@mediaクエリを使用するウェブサイトがありますが、設定していないようです。彼らは常にデフォルトのスタイルを維持します。例えばCSSのメディアクエリと！important
：私は!importantを使用しない限り、赤が、私のメディアクエリ内私は非常に多くのセレクタをスタイリングしています：
#div1 { background:red}
@media screen and (max-height:912px) {
#div1{background:blue}
}
は常に背景に固執します。単一セレクタスタイル!importantに設定する必要がありますか？
高さをminに変更し、最大高さ：！http://jsfiddle.net/jnQYb/
私にとってはうまく動作します。
これを見てください：http://jsfiddle.net/TUL6h/1/ - 背景は赤ですが、結果の部分の高さを変更すると、ある点で青に変わります。
どのブラウザをお試しになっていますか？
遅く返事を申し訳ありません。私はなぜそれが機能していないのかを考えようとしていました。ここにあります：http://jsfiddle.net/TUL6h/3/サイズを変更して色を青くしてみてください。それは起こることはありません – jQuerybeast
それは正しいですが、 'background：green'が' background：blue'をオーバーライドするので、適切な動作です。これを実現するには、次のような記述が必要です。http://jsfiddle.net/TUL6h/5/ – MarcinJuraszek
これは機能しません。これはブラウザの問題でしょうか？ –
は、必ずしも、重要は、デフォルトのスタイルで使用される属性をオーバーライドするために、すなわちデフォルトのCSSを上書きするために使用されるわけではありません。したがって、メディアクエリに新しい属性がある場合は、それと一緒に使用する必要はありません。
あなたの@mediaクエリに含まれるコードの重要な部分は、あなたのページの要素に動的スタイルのプロパティを追加するのに効果的な方法ですが、簡単なメンテナンスのためにあなたのデフォルトのCSSをそのまま残しておきます。
例：
<html>
<head>
<style>
@media all and (max-width: 768px) {
/* CSS styles targeting screens of smaller sizes and/or resolutions (IE phones and tablets) */
#semantically-named-element p
{ width: 60% !important;
background: rgba(0,0,255,1)!important;
margin: auto !important; }
#semantically-named-element span
{ display: none !important; }
}
/* Look ma no media queries needed for default CSS below! Very easy to discern default styles, when the default code is the stuff not wrapped in queries. Period. */
/* Default CSS style attributes for any viewports that do not fit into the low or high resolution/screen size parameters set above and below. Also the fallback for browsers that still disregard CSS media queries */
#semantically-named-element p
{ width: 90%;
background: rgba(255,0,0,1);
margin: auto; }
#semantically-named-element span
{ display: block;
background: rgba(0,0,0,0.8);
color: #FFF;
text-align: center;}
@media all and (min-width: 968px) {
/* CSS styles targeting very large or very high resolution viewports at the 769 pixels wide "break-point" */
#semantically-named-element p
{ width: 80% !important;
background: rgba(0,255,0,1)!important;
margin: auto !important; }
#semantically-named-element span
{ display: block !important;
background: rgba(0,0,0,0.8)!important;
color: #FFF !important; font-size: 200%; }
}
</style>
</head>
<body>
<div id="semantically-named-element">
<p> Usage of !important inside of the code contained within your @media queries is an effective way to add dynamic style properties to your pages elements, while leaving your 'default' css intact for easy maintenance.<span>hidden until tablet greater 768 viewport pixel width</span></p>
</div>
</body>
</html>
//jsfiddle.net/TUL6h/55/であなたの例を見てみると： あなたはメディアクエリの順序を変更する必要があります。 最大高さ：510px; には が含まれます。最大高さ：500px。 500px beeingの特別な場合は、最初に表示されなければなりません。
jsfiddle.net/TUL6h/55は私のものではありません。鉱山は5まで作成されました。残りはここの周辺のユーザーからのものです。 – jQuerybeast
私は同じ問題を抱えていました。私は、たとえあなたのワークフローで複数のファイルを使用/インポートしていても、メディア・クエリはスタイル・シートの最後になければならないことに気付きました。
あなたのコードは私のシステムで正常に動作しています。私はMacでFirefox、Chrome、Safariをテストしました。あなたのテスト環境は何ですか？ – Anji
遅く返事を申し訳ありません。私はなぜそれが機能していないのかを考えようとしていました。ここにあります：http://jsfiddle.net/TUL6h/3/サイズを変更して色を青くしてみてください。それは決して起こらない – jQuerybeast
それはCSSのセクションの最後の色だけを選ぶでしょう。 – jQuerybeast