媒體查詢不操作

我一直在試圖找出讓媒體查詢服務屏幕高達660px高清晰度圖像，但不是說是完全321px屏幕。

其目的是爲臺式機/筆記本電腦等和我的桌面應用程序有一個321像素的視區一個正常的低分辨率圖像，而660以下的任何（不包括321像素視口）獲得高分辨率圖像。

它使用這兩個查詢，但320px視口請求這兩個圖像。我可以偷懶，離開它是，因爲它實現了我想顯示什麼明智的，但它吃不必要的帶寬：

@media all and (min-width:661px){ //serves high res image to iphones etc (good), but also my 321px desktop app viewport (bad)

其次...

@media all and (min-width: 661px), all and (width:321px) { //serves low res image to desktops (good) and my 321px desktop app viewport (good)

我一直在玩在第一個查詢不是運營商，但沒有破解它，例如

all and (min-width:661px) and not (width:321px)

...但沒有去。

那麼，如何改變第一個查詢說...

允許所有660px下，卻忽略任何爲321px到底是什麼？

謝謝你看看。

來源

2012-11-30 Shaun

以下是一些媒體查詢。最後一個是你正在尋找的。 320px和322px之間的任何內容都會將您的身體背景顯示爲黑色。就像說只在321px顯示。希望這可以幫助！

@media only screen and (max-width: 660px) { body {background:red;} } 

@media only screen and (min-width : 320px) and (max-width : 322px) {body{background:#000;}}

來源

2012-11-30 16:42:07 JCBiggar

謝謝JC - 我在昨晚回覆之前錯過了你的回答。非常感謝隊友 - 我會試試你的。 – Shaun

非常歡迎您！謝謝！祝你有美好的一天！上帝保佑！ – JCBiggar

嘿JC - 我比較了兩套媒體查詢。我發現你已經將兩組圖像下載到了321屏幕上（當然只有1個節目，但是頭部顯示了兩個圖像都在被請求），這意味着不必要的帶寬等。我猜這是因爲321屏幕符合兩個媒體查詢的標準，而另一組查詢從第一個查詢中排除了321。 – Shaun

沒關係 - 我想我破解了不使用不 - 這裏是......

@media all and (min-width: 322px) and (max-width: 660px), (max-width: 320px) { //hi res image for all screens 660px and below, excluding those exactly 321px

...其次...

@media all and (min-width: 661px), all and (width:321px) { //low res image for all screens above 660px, plus those exactly 321px

似乎是工作我怎麼想。

來源

2012-11-30 16:38:28 Shaun

媒體查詢不操作

回答

相關問題