CSSメディアはmin-widthとmin-device-widthの両方に矛盾しますか？

Question

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

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

You can see the effects here（これは、それがどのように見えるかである）

And here（私のクエリに-device-幅を追加した後、私の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"> 

Answer 1

デバイス幅は、ディスプレイの解像度（例えば1024×768から1024）を指し）。あなたの解像度が1つのブレークポイントに収まるのに十分な大きさだが、ブラウザの幅があなたをもう1つにするのに十分小さい場合は、両方の組み合わせが奇妙になります。あなたは解像度ではなく、ビューポートのサイズに基づいて、スタイルシートを制限する正当な理由がない限り

、そしてちょうどmin-width/max-widthを使用してmin-device-width/max-device-width避けます。