css - 媒体查询中 "Not"运算符的问题

Question

我在响应式网站上工作，我的客户希望将某些样式应用于 768 像素的桌面，但不适用于该尺寸的平板电脑。我尝试了多种媒体查询，但只能让 Firefox 配合。 Chrome、Safari 和 IE 都忽略了媒体查询。这是我尝试过的。

 @media only screen and (min-width: 768px), not (min-device-width: 768px) and (max-device-width: 1024px) {
    /* styles for desktop only here */
 }

我认为这与“非”运算符有关，但我没有发现我做错了什么。还值得一提的是，ipad(在我的模拟器中)忽略了媒体查询，这正是我想要的。我只是无法在桌面上安装 Chrome、Safari 和 IE 来阅读该死的东西。

Answer 1

每个用逗号分隔的媒体查询字符串都应该是完整格式的(我不知道在规范中任何东西从一个到下一个继承......虽然一些 浏览器可能在此处支持“快捷方式”，谨慎使用最小公分母:规范)。 (除其他外，这使得测试更容易，因为简单的文本 mod 允许您一次测试一个媒体查询。)当然，“仅”和“不”是相互排斥的选项。所以我认为语法应该是

@media only screen and (min-width: 768px), not screen and (min-device-width: 768px) and (max-device-width: 1024px) {

(xxx-device-width: 和 xxx-width: [包含或排除“-device”] 指的是屏幕宽度和视口(viewport)/布局宽度分别 [对于“桌面”设备和大多数手持设备，如果指定了 <meta name="viewport"content="width=device-width">，通常是相同的，但可能不是对于在页面的 HTML 源代码中没有“视口(viewport)”规范的智能手机也是如此)。我通常不会在单个媒体查询语句中看到两者的混合，因此 [尽管我还没有尝试详细理解这个示例] 我怀疑有些地方有点不对劲。)