0

初めてのメディア クエリを作成しました。次のメディア クエリを custom.css ページに追加しました。

@media (max-width: 1200px) {
footer {
  background-color: red;
   }
}

メディア クエリが実際にどのように機能するかを確認できるように、フッターを赤にしました。ブラウザを 1200px まで拡大すると、メディア クエリに 1200px まで赤色のままにするように「指示」したにもかかわらず、1200px に達する前の 1183px あたりでフッターが茶色に変わります。1200px に達する前に赤が消えるのはなぜですか?

私のサイトのライブ プレビューはこちらです。

編集:実際のブレークポイントが 1200px ではなく 1183px であることに気付きました...そして、メディアクエリが max-width:1200px で書かれているにもかかわらず、フッターが赤くなるのはその時です.....

4

1 に答える 1

0

あなたのメダイクエリは私には良さそうです。

@Kevin Reidによるコメントを取り上げると、jQuery にはウィンドウ幅の計算にスクロール バーが含まれます。@media クエリを使用する場合、Webkit ブラウザー (Chrome や Safari など) にはスクロール バーが含まれませんが、Firefox ではメディア クエリの計算にスクロール バーが含まれているという他のユーザーのコメントを読みました。

ページで期待どおりに何かが機能しないために質問している場合は、Bootstrap CSS が 1200 px でレイアウトを変更することに注意してください。 

@media (min-width: 1200px){
... grid changes here ...
}

あなたのテストは

@media (max-width: 1200px) {
footer {
background-color: red;
}
}

したがって、実際にはブートストラップ CSS と 1px 同期していません。あなたはそれをに変更することができます 

@media (max-width: 1199px) {
footer {
background-color: red;
}
}
于 2013-05-30T11:48:44.163 に答える