生日
我一直在尝试制作一个媒体查询，为高达 660 像素的屏幕提供高分辨率图像，而不是恰好 321 像素的屏幕。
目的是为台式机/笔记本电脑等提供服务，我的桌面应用程序具有 321px 视口(viewport)的普通低分辨率图像，而任何低于 660(不包括 321px 视口(viewport))的东西都会获得高分辨率图像。
它使用这两个查询工作，但 320 像素视口(viewport)请求两个图像。我可能会偷懒，让它保持原样，因为它实现了我想要的显示效果，但它占用了不必要的带宽:
@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 的吗？
感谢您的关注。
最佳答案
这里是一些媒体查询。最后一个是你要找的。介于 320 像素和 322 像素之间的任何内容都会将您的 body 背景显示为黑色。就像说仅以 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;}}
关于css - 媒体查询不是运算符，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13649094/