4

私は他の誰かのcssを変更していて、@mediaクエリを実装してページをレスポンシブにしようとしています。私は実装しました：

@media screen and (max-width: 1300px),
screen and (max-width: 1024px) {}

@media only screen and (max-width: 860px) {}

これは正常に機能しますが、@ media screenと（max-width：600px）{}を実装すると、機能していないようです。

または-クロームとオペラでは問題なく動作するようですが、FFでは動作しません。FFではページが右端で切り取られ、スクローラーがなく、理由はわかりません。positon：relativeを使用しても変更されません。確認します。「overflow：hidden」はありません。

もう1つは、メディアクエリの場合、min-widthを使用することをお勧めしますが、min-widthを使用する場合は、最小値（たとえば、min-width：600）のみが適用されます。

私はここで何かを逃したと思います...何か提案はありますか？レスポンシブウェブデザインにとても熱心なので、本当に感謝しています。

4

2 に答える 2

11

@mediaこれは、クエリが機能しているかどうかをテストするためのクリーンな方法です。

body {
    background-color:black;
}

@media screen and (min-width: 1024px) and (max-width: 1300px) {
    body {
        background-color:red;
    }
}

@media screen and (max-width:860px) {
    body {
        background-color:yellow;
    }
}

@media screen and (max-width: 600px) {
    body {
        background-color:orange;
    }
}

画面の最小幅が1024ピクセルの場合、860ピクセルを下回っている場合、および600ピクセルに下がっている場合、背景はblackデフォルトである必要があります。redyelloworange

したがって、スタイルシートに競合するメディアクエリがないことを確認してください。

http://jsfiddle.net/crUVv/show/

于 2012-01-05T12:54:21.310 に答える
5

これは実際の問題ではないかもしれませんが、小さいビューポートサイズのメディアクエリへの応答性をテストするときは、すべてのブラウザウィンドウの装飾が邪魔にならないように注意してください。

最近、こんな「問題」がありました。最初は、Firefoxのメディアクエリに問題があると思っていましたが、ブラウザのナビゲーションバーのサイズが原因で、実際に最小幅の値を下回るサイズに変更できないことがわかりました。

つまり、問題のあるページではありませんでした。ナビゲーションバーにあるものが多すぎて、ブラウザが特定のポイントより下でサイズを変更できなかったのです。これは、ブラウザによって動作が異なるように見える理由も説明しました

ブラウザのナビゲーションバーをオフにすると、正常に機能しました。ドー！

于 2012-03-25T00:30:32.573 に答える