站点未响应媒体查询

Question

我正在使用 Windows 10、Codeigniter、jQuery 和 Firefox 43.0.4，尽管我不明白为什么这会影响这个问题。我想将样式应用到 iPad 尺寸 window 所以我使用这个媒体查询：

@media only screen
and (min-device-width: 768px)
and (max-width: 1024px)
{
    *{color:#ff0000 !important;}
}

作为一项测试，应该将所有文本变为红色，但它在 Firefox 43.0.4（或 Chrome 等）中不起作用。我还使用 Web Developer 扩展将门户设置为正确的大小。我使用了头部元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

可能很明显，但我看不到它，而且我以前使用过媒体查询。这让我抓狂，如能就我哪里出错提出任何建议，我将不胜感激。

Answer 1

您不必使用 min-device-width，只需使用 min-width

 @media screen and (min-width:768px) and (max-width:1024px) {}

Answer 2

我相信您缺少设备前缀，CSS 应该是：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

您可以阅读有关 Stephen Gilbert's site 的更多信息。

Answer 3

尝试这样的事情：

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

Answer 4

我似乎已经通过使用上面的 Mathew Riches 代码解决了这个问题，我之前没有意识到这一点的原因是，对我来说，它在调整大小的 firefox 浏览器中不起作用 window一直是我选择的试验台。要使用调整大小的浏览器，我需要使用：

@media only screen 
and (min-width : 768px) 
and (max-width : 1024px)  { /* STYLES GO HERE */}

但这对我的 iPad 4 不起作用。顺便说一句：

and (-webkit-min-device-pixel-ratio: 2)

像素比为 1 或 2 会杀死我的 iPad 4.

上的响应

所以唯一的测试方法是上传 CSS 中的每个更改并检查 iPad 本身，这很烦人，因为我通常使用本地服务器进行所有开发。

然后我发现 iPad 上的 full-screen 背景图片存在问题，但那是另一回事了...

非常感谢所有贡献者的想法和我的目的，我现在认为此查询已解决。

Site not responding to media query