媒体查询不是运营商

Question

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的确切？

感谢您一看。

Answer 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;}}

Answer 2

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

@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

似乎正在按照我想要的方式工作。