私のメディアクエリは、特にランドスケープの正しく機能していません

Question

1つのヘッダーのメディアクエリを処理していますが、メディアクエリが機能していません。あるデバイスのメディアクエリを正しく修正すると、デバイス上で動作していません。私が欲しいものを正確に応答していないため、ここで は私のコードです...

@media (max-width: 499px) { 
    .mission h1 { 
     font-size: 10px; 
     margin-right: 550px; 
     margin-top: -15px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 10px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 6px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 5px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media (min-width: 610px) { 
    .mission h1 { 
     font-size: 16px; 
     margin-right: 550px; 
     margin-top: -15px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 16px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 10px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 7.5px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media (min-width: 700px) { 
    .mission h1 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-top: 50px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media (min-width: 700px) and (orientation: landscape) { 
    .mission h1 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-top: 50px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media tv and (min-width: 700px) and (orientation: landscape) { 
    .mission h1 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-top: 50px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media (max-width: 860px) { 
    .mission h1 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-top: -20px; 
     ; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 16px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 8px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 

私が試した上記のコードは、少し私の問題を解決しました。 私のウェブサイトはライブであり、リンクを使用してオンラインで解錠することができます。 http://www.ericsbo.se/ 私は通常、このウェブサイトのウェブサイトのオンラインによる応答性について私のウェブサイトをチェックします。いずれかが何らかのバグを見つけることができるかどうかチェックします。オンライン・チェックのウェブサイトはhttp://www.isresponsive.com/

Answer 1

オーケーここで見つけることができますので、私はいくつかのテストを行っていると私はを知っている理由 [幅]以下であれば、それは」、最大幅を意味するので、それをやっている 〜[max-width]はtrueを返します。

is 300px <= 499px (returns true)

is 300px <= 800px (returns true)

したがって、この場合には、両方がtrueを返しますと、私はCSSで、後者のコードは大きな優先順位を持つことになりますし、却下されますと信じて：私たちはこのようなクエリを読み、これを知っ

前のコード。だから、あなたはこれを切り替えると最小幅とそれを達成することができ、セットの境界は、（私はコメントで提案するもの）、またはあなたがmin-width:800px論理声明それはべき仕事の後min-width:499px論理声明を入れた場合、私は信じています。

編集： ランドスケープの場合、私が考えることができる（私はこれをやり遂げていない）最良の方法は、実行したくないすべての人に論理ステートメントを割り当てることですランドスケープモードではand not (orientation: landscape)であるため、トリガーされません。おそらくもっと良い方法ですが、あなたはいくつかの研究をしなければなりません。ここにいくつかの良い情報を持つ良いページです。 CSS Tricks

Answer 2

私はいくつかの調査を行い、ほぼすべてのメディアデバイスをカバーする最も正確なメディアクエリが以下の通りであると結論付けました。

@media only screen and (min-width: 150px) and (max-width: 600px) { 
/****** @Style ******/ 
{ 

@media only screen and (min-width: 761px) and (max-width: 1200px) { 
    /****** @Style ******/ 
}