<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/assets/css/phone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px)" href="/assets/css/tablet.css" />
上記は私の条件付き CSS で、携帯電話用とタブレット用にそれぞれ 1 つのスタイル シートで読み込まれますが、コンピューターで表示するときにタブレット スタイルシートを使用するにはどうすればよいですか?
当然の答えですが、メディアクエリは、そのスタイルシートをタブレットで使用することを制限する唯一のものです。
そのメディアクエリを削除すると、CSSの特異性に関する通常のルールを念頭に置いて、デスクトップ（およびその他の該当するデバイス）で使用できるようになります。後で宣言されたスタイルは、前に宣言されたスタイルを無効にします。したがって、タブレットスタイルで通常のデスクトップCSSファイルをオーバーライドする場合は、ドキュメントの後半で宣言/インポート/リンクする必要があります。まだhead、私は想像しますが、他の人の後にあなたはオーバーライドしたいです。
また、確かにスマートフォンの場合は覚えておく価値がありますが、タブレットについてはよくわかりません。特に、フォーム要素用のカスタムGUI要素が含まれている場合があります。そのため、デスクトップからタブレットへの変換は（開発目的であっても）、あなたや私たちが望むほどシームレスではない可能性があります。
メディア クエリ "(min-device-width: 768px)" は、幅が 768px を超えるすべてのものである (タブレット、デスクトップ、横になっているデバイスなど) ため、コードは既にデスクトップでほとんど機能するはずです。ブラウザーがメディア クエリをまったくサポートしていると仮定すると、これはあなたが望むよりも多くの場合、正しくない可能性があります。)
とはいえ、 4 つの問題が考えられます。
まず、一部の携帯電話は「画面」カテゴリではなく「ハンドヘルド」カテゴリに分類されるため、「画面のみ」は一致せず、デバイスに CSS がまったく送信されません。 . 考えられる解決策の 1 つは、代わりに「only all ...」を指定することです。(これにより、印刷用の CSS がまったくないという問題も回避されます。)
第二に、最高のパフォーマンスを得るために、HTML ステートメントでメディア クエリを指定するのではなく、すべての CSS とメディア クエリを 1 つのファイル ( @media ...[query]... { CSS ステートメント; } ブロックを使用) に入れることをお勧めします。複数の CSS ファイル。すべての CSS ファイル (メディア クエリによって無効にされたものを含む) は常にダウンロードされます。これには、かなりのネットワーク帯域幅が必要になる可能性があります。
第三に、まったく分類されない避けられないデバイスの「フォールバック」はありません。ほとんどの場合、各 Web ページには、デフォルト/フォールバック CSS を提供するために、1 つの CSS ブロックまたは 1 つの <link... ステートメントのいずれかを含めて、メディア クエリを指定せずに、他の CSS をその CSS の上に構築するか、上書きする必要があります。
そして第 4 に、デバイスのピクセル単位の寸法は、非常に高密度のディスプレイや新しい「ビューポート」によって大きく歪められることがよくあります。その結果、テストによると、一部のスマートフォンはタブレットのように見えます。デバイスのピクセル密度はロジックに対応できます。「ビューポート」は「メタ」ステートメントで制御できますし、制御する必要があります。これは、通常のデフォルトでは何があっても「機能」するためですが、一般的に、よりインテリジェントなレスポンシブ レイアウトを適切に処理できないという犠牲が伴います。
(メディア クエリ、メディア クエリの可変性、および密度の問題に対するサポートの欠如に対する代替アプローチについては、http://www.ckollars.org/alternative-to-media-queries.htmlを参照してください)