CSS媒體查詢最小寬度和最小設備寬度衝突？

我對媒體查詢的世界非常陌生，顯而易見，我忽略了寬度和設備寬度之間的差異 - 除了明顯的定位能力之外，還有一些基本的東西。CSS媒體查詢最小寬度和最小設備寬度衝突？

我想定位普通計算機和具有相同斷點的設備，所以我只是將最大寬度查詢的所有最小寬度查詢都複製到最小設備和最大設備寬度查詢。無論出於何種原因，當我添加-device對應項時，我的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">

來源

2013-03-07 seaofinformation

在FF中，這兩個版本看起來完全一樣。在哪個瀏覽器和版本中有問題？ – 2013-03-07 16:24:14

FF 12.確保從最寬到最小的範圍內緩慢拖動，以便可以看到其他查詢。我在每次嘗試的瀏覽器中都看到了這個問題 - FF，Chrome等 - 我不確定是否以較小的寬度進行嘗試。 – seaofinformation 2013-03-07 16:29:55

這裏的截圖關閉FF 12和Chrome 25 http://www.swanflighthaven.com/pagestuff/correct.jpg和http://www.swanflighthaven.com/pagestuff/incorrect.jpg – seaofinformation 2013-03-07 16:35:32

設備寬度是指顯示屏的分辨率，而寬度是指瀏覽器本身（這將是從分辨率不同的寬度如果瀏覽器沒有被最大化（例如1024從1024×768）。）。如果您的分辨率足以讓您處於一箇中斷點，但瀏覽器的寬度足以讓您處於另一箇中，那麼您最終會遇到兩者的奇怪組合。

除非有正當的理由來限制根據該決議，而不是視口的大小，樣式表，就用min-width/max-width，避免min-device-width/max-device-width。

來源

2013-03-07 16:34:19 cimmanon

啊。那是非常有意義的。非常感謝你簡潔的解釋！我感到蠢蠢欲動，我從我讀過的書中看不到這一點。但問題是：我如何定位移動設備和計算機？ – seaofinformation 2013-03-07 16:37:30

如果我跳過設備寬度，是否所有設備都是針對的（Iphone，Ipad等）？ – seaofinformation 2013-03-07 16:39:57

由於移動設備的瀏覽器通常都是最大化的，因此設備寬度和寬度將相同。 – cimmanon 2013-03-07 16:56:09

CSS媒體查詢最小寬度和最小設備寬度衝突？

回答

相關問題