複数のクエリでメディアクエリーが機能しない

Question

レスポンシブウェブデザインのFirefoxデベロッパーエディションには、7つの画面サイズのペアと11種類のサイズがあります。リストされているサイズをカバーするには、いくつかのメディア照会が必要です。

最大のサイズの書式用のスタイルシートを作成しました。そこから、320pxから640pxの範囲の画面サイズ用に別のスタイルシートを作成しました。 htmlページは、スタイルシートへのリンクをしています

<meta name="viewport" content="width=device-width" /> 

と

<link rel="stylesheet" type="text/css" href="styles/320_home.css"   type="text/css" 
     media="screen and (max-width: 635px)" /> 

は、スタイルシートは、この形式になっています。

ページはFirefoxで開かれ、その中にテストされ

@media screen and (max-width:640px){ 
    -- css statements-- 
} 

RWD環境では、完全に動作します。

私は、まったく同じクエリのフォーマットを使用して次のサイズ範囲のための第二の別々のスタイルシートを作成：HTMLページに を：

<link rel="stylesheet" type="text/css" href="styles/768_home.css" 
media= "screen and (min-width:768px) and (max-width:1200px) /> 

と

@media screen and (width:768px) and (max-width:1200px){ 
} 

は変更できませんでした、別のスタイルシートにウェブページ上のもの

元のCSSの下のメインスタイルシートに320px〜640pxの範囲を入れました。完全に機能しました。

2番目のサイズの範囲で同じことをやり直してください：もう一度、ウェブページ上のものを変更できませんでした。

ここでは、他のメディアクエリの質問を見ました。私はお勧めとまったく同じでした。しかし、私は複数のメディアクエリに応答するWebページを取得することはできません。 解決策として？ ありがとうございます。

補遺：

これは内側のページです。ランディングページで複数の別々のスタイルシートが使用され、最小幅（320ピクセル）から最終サイズ（1366ピクセル）にかけて大きく変化しました。これは、もはやメインのスタイルシートに埋め込まれたクエリの膨大な量と、複数のクエリシートの問題ではありません。それはなぜ本書のコードが一貫して効果的でないのかの問題です。

Answer 1

あなたの問題は、画面が768個のピクセルの幅であるときにのみ、仕事にCSSを指定していることである：私はあなたが探していると思う何

@media screen and (width:768px) and (max-width:1200px){ 
    //CSS Here 
} 

は768個のピクセルに最小幅のためです、これはあなたが必要とするでしょう：

@media screen and (min-width:768px) and (max-width:1200px){ 
    //CSS Here 
} 

これは768と1200ピクセル幅の画面で動作します。