css - 媒体查询不是运算符

Question

吉日

我一直在试图弄清楚制作一个媒体查询，它可以为高达 660px 的屏幕提供高分辨率图像，但不能提供正好为 321px 的屏幕。

目的是为台式机/笔记本电脑等提供服务，而我的桌面应用程序具有 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)

……但是不行。

那么我如何改变第一个查询说......

允许所有低于 660 像素，但忽略任何 321 像素？

谢谢你看。

Answer 1

以下是一些媒体查询。最后一个是你要找的。介于 320px 和 322px 之间的任何内容都会将您的身体背景显示为黑色。就像说只显示 321 像素。希望这可以帮助！

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

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

Answer 2

没关系 - 我想我没有使用 not 就破解了它 - 这里是......

@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

似乎正在按我的意愿工作。