web-dev-qa-db-ja.com

CSSメディアは、最小幅と最小デバイス幅の競合を照会しますか？

私はメディアクエリの世界には非常に新しく、明らかなターゲティング能力以外に、幅とデバイス幅の違いについて欠けている根本的な要素があることは明らかです。

同じブレークポイントで通常のコンピューターとデバイスの両方をターゲットにしたいので、すべての最小幅と最大幅のクエリを最小デバイスと最大デバイス幅のクエリに複製しました。何らかの理由で、対応する-deviceを追加すると、通常のコンピューターではCSSの解釈が大きく異なり、何が間違っているのかわかりません。

ここで効果を見ることができます （これはそのように見えるべきです）

そしてここ （クエリに-device-widthを追加した後、CSSは最小の幅でめちゃくちゃになります。ブラウザの幅が呼び出される幅よりも小さい場合でも、より大きな解像度が見られます）。

ここに私のCSSリンクがあります-私の構文に何か問題がありますか？ ：

<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css">
<link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css">
<link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css">


<link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css">
<link rel="stylesheet" media="only screen and (min-width: 1200px) and (max-width: 1299px), only screen and (min-device-width: 1200px) and (max-device-width: 1299px)" href="1200.css">
<link rel="stylesheet" media="only screen and (min-width: 1300px), only screen and (min-device-width: 1300px)" href="1300.css">
csscss3media-queries
31
seaofinformation

デバイスの幅はディスプレイの解像度（例：1024x768から1024）を指し、幅はブラウザ自体の幅を指します（ブラウザが最大化されていない場合、解像度とは異なります）。解像度が1つのブレークポイントに到達するのに十分な大きさで、ブラウザの幅が別のブレークポイントに到達するのに十分小さい場合、両方の奇妙な組み合わせになります。

ビューポートのサイズではなく解像度に基づいてスタイルシートを制限する正当な理由がない限り、min-width/max-widthを使用し、min-device-width/max-device-widthを避ける。

77
cimmanon