@mediaクエリの問題

Question

他の人のcssを変更しています。@mediaクエリの実装に応答するようにしています。 私が実装さ：

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

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

正常に動作しますが、私は @media画面および実装するとき（最大幅を：600PX）{}働いていないようです。

OR - クロムとオペラはFFではない：FFでは、ページは右端で切り取られ、スクロールはありません。なぜ私は本当にその理由がわかりません。ポジションを使用しても変化しません。相対的ですが、私はチェッカーしています - 私は「オーバーフロー：隠されていません。

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

私はここで何かを逃したと思う...任意の提案？私は本当に感謝しています。私はレスポンシブルウェブデザインに非常に熱心です。

Answer 1

これはあなたの@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; 
    } 
} 

あなたの背景には、デフォルトでblack、redする必要がある場合は、画面の最小幅は1024個のピクセル、yellowある場合それが860px未満になるとorangeになります。

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

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

Answer 2

これはあなたの実際の問題ではないかもしれないが、私は小さなビューポートサイズのメディアクエリへの応答性をテストするときに、すべてのブラウザウィンドウの装飾が邪魔になっていないことを確認してくださいことを指摘する価値だと思います。

最近このような「問題」がありました。最初はFirefoxのメディアクエリが間違っていると思っていました。私がチェックしてブラウザのバーのサイズがわかっていて、実際に私の最小幅の値より下にサイズ変更されていないことが分かりました。

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

ブラウザのナビゲーションバーをオフにすると問題なく動作します。ドー！