-2

レスポンシブ Web デザインの CSS メディア クエリを使用しています。それらを整理してアクセスしやすくするために、次のように、CSS ドキュメントの上部ですべてのメディア クエリを宣言しています。

* {margin:0 auto; padding: 0;}
body {margin: 0; padding: 0; font: normal 100% Helvetica, Arial, sans-serif; color: #FFF; background: url(../img/defaultNav.jpg); background-repeat: repeat-x;}
h1 {font-size: 5.75em; font-weight: 800; text-align: center}
h2 {font-size: 2.5em; font-weight: 300; text-align: center; line-height: 50px;}
h3 {font-size: 2.5em; font-weight: 100; line-height:50px; color: #666;}
h4 {font-size: 1.25em; font-weight: 100; color: #999; margin-top: 10px; margin-bottom:18px;}
p {font-size: 1em; color: #999;}
a {color: #999; text-decoration: none;}
a:hover {text-decoration: underline;}

@media screen and (min-width: 1700px) { 
                                        h1 {font-size: 6.2em;}
                                        h2 h3 {font-size: 3.5em;}
                                        h4 {font-size: 2.5em;}
                                        p {font-size: 2em;}
                                        /*.content {max-width: 80em;}*/
                                      }
@media screen and (max-width: 780px) {  /*.column {float: none; width: auto;}*/ }
@media screen and (min-width: 681px) {  .mobileBar, .nav {display: none;}   }
@media screen and (max-width: 680px) {  .header .title h1 {font-size: 2.5em;}   h2 {font-size: 1.5em;}  .headerSmall .title h1 {font-size: 2.5em;}  }
@media screen and (max-width: 500px) {  p {text-align: left;}   }
@media screen and (max-width: 320px) {
                                        * {text-align: left;}
                                        h1 { font-size: 2.5em;}
                                        h2 {font-size: 1.2em;}
                                        h3 {font-size: 1.6em; line-height: normal; text-align: center;}
                                        h4 {font-size: 1.4em; text-align: center;}
                                        .content .contentTitles img {display: none;}
                                     }

上記でコメントアウトした 2 つを除いて、クエリは正常に機能します。（最初の2つのクエリの下で）これらの2つのクエリは、影響を与えようとしているクラスの下でそれらを記述した場合にのみ機能します。

.content {
margin:auto;
padding:1em 2em;
max-width:35.75em;
height:inherit;
}
@media screen and (min-width: 1700px) {    .content {max-width: 80em;}    }

なぜこれを行っているのかわかりません。ここでスタックと一般的なGoogle検索で調査を試みましたが、結果が見つかりません。コードを整理しておくのが好きなので、本当にイライラします。なぜこれが起こっているのか誰かが何か知っているなら、助けていただければ幸いです。また、最新バージョンの Safari と Firefox および Safari iOS でもテストを行っており、それが違いを生むかどうかを確認しています。

4

1 に答える 1

3

さて、ルールの は、メディア クエリからのルールmax-width: 35.75emを.content上書きしています。あとで来るから。それがカスケードの仕組みです。

メディア クエリ ルールをグループ化して順序付けする方法は完全に自由ですが、後で追加されるルールよりも特別な優先順位が付けられるわけではなく、他の CSS ルールと同様にオーバーライドできます。

ブラウザーのスタイル インスペクターには、どのスタイルが適用またはオーバーライドされているかが正確に表示されます。使い方わかりますか？

于 2013-07-22T04:12:43.960 に答える