CSS3メディアクエリが機能しない

Question

私のウェブサイトでは、次のメディアクエリを使用しています。

<link rel="stylesheet" href="web.css" media="only screen and (min-device-width : 1025px)" /> 
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" /> 

私の意図は、さまざまなデバイスに異なるスタイルシートを使用することでした。 （今のところ私はデスクトップとipadsだけをサポートしたい）。

Firefox（バージョン8）またはChrome（バージョン15.0.874.106）を使用して自分のデスクトップにWebサイトを読み込むと、両方のCSSファイル（web.cssとipad.cssの両方）がダウンロードされます。

私のコードで何が間違っているのか分かりません。誰かがこれで私を助けることができますか？

Answer 1

ITは動作しますが、数値を下に変更してみてくださいしない場合があります。Desktopため

<link rel="stylesheet" href="web.css" media="only screen and (min-device-width : 1024px)" /> 
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1023px)" 

Answer 2

あなたの代わりにこのようなmin-device-withのmin-widthを書かなければならない：使用をサポート

<link rel="stylesheet" href="web.css" media="only screen and (min-width : 1025px)" /> 
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" /> 

Answer 3

ブラウザを残念ながら表示する必要があるものとは無関係に、すべてのスタイルシートをダウンロードします。

これらのクエリは、デバイスではなく解像度に基づいて2つの異なるレイアウトハンドルを提供しますが、どちらのスタイルシートも常にダウンロードされます。

media="screen and (min-width: 768px) and (max-width: 1024px)" 
media="screen and (min-width: 1025px)"