Gidday
我一直在试图制作一个媒体查询，为高分辨率图像提供高达660像素的屏幕，而不是高达321像素的屏幕。
目的是为台式机/笔记本电脑等提供服务，我的桌面应用程序具有321px视口正常低分辨率图像，而660以下（不包括321px视口）的任何内容都可获得高分辨率图像。
它使用这两个查询，但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)
我在第一个查询中一直在使用not运算符，但还没有破解它，例如
all and (min-width:661px) and not (width:321px)
......但是没有去。
那么如何改变第一个查询来说...
允许所有低于660px，但忽略任何321px的确切？
感谢您一看。
答案 0 :(得分：1)
以下是一些媒体查询。最后一个是您正在寻找的。 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;}}
答案 1 :(得分：0)
没关系 - 我想我没有使用它就破解了它 - 这里是......
@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
似乎正在按照我想要的方式工作。