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

每个由逗号分隔的媒体查询字符串都应该完全形成（我不知道在规范中任何从一个传递到下一个......虽然 some < / em>浏览器可能在这里支持“快捷方式”，谨慎地坚持最低标准：规范）。（除此之外，这使得测试更容易，因为简单的文本模块允许您一次测试一个媒体查询。）当然，“仅”和“不”是互斥的选项。所以我认为语法应该是

@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”]参考屏幕宽度和视口/布局宽度分别[对于“桌面”设备通常是相同的，对于大多数手持设备，如果指定＆lt; meta name =“viewport”content =“width = device-width”＆gt;但是不对于没有页面HTML源代码中的“viewport”规范的智能手机，也是如此。我通常不会在单个Media Query语句中看到两者的混合，所以[尽管我还没有尝试详细了解这个例子]我怀疑某些事情有点不对。）

Answer 2

你不能告诉appart平板电脑和具有分辨率媒体查询的计算机：在不同的硬件上有太多不同的分辨率而没有真正的通用规则（看看here，那只是Androïd！）

您应该使用Javascript检测触摸支持，在HTML标记中添加一个类并在此基础上构建CSS，记住它不是100％捕获（有触摸计算机。）

试试http://www.modernizr.com/！

媒体查询中“不”运算符的问题

2 个答案: