私はメディアクエリの世界に非常に慣れていません。幅とデバイス幅の違いについて、明らかなターゲティング能力以外に、根本的な何かが欠けていることは明らかです。
通常のコンピューターと同じブレークポイントを持つデバイスの両方をターゲットにしたいので、すべての最小および最大幅のクエリを最小デバイスおよび最大デバイス幅のクエリに複製しました。何らかの理由で、対応する-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">