网站未响应媒体查询

Question

我使用的是Windows 10、Codeigniter、jQuery和Firefox 43.0.4，尽管我不明白为什么会影响这个问题。我想将样式应用于iPad大小的窗口，所以我使用这个媒体查询：

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

作为一个应该将所有文本变为红色的测试，它在Firefox 43.0.4（或Chrome等）中不起作用。我还使用WebDeveloper扩展将门户设置为正确的大小。我用过头部跖骨：

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

可能很明显，但我看不出来，而且我以前也使用过媒体查询。这让我发疯了，如果有任何关于我哪里出了问题的建议，我将不胜感激。

Answer 1

我认为您缺少设备前缀，CSS应该是：

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

您可以在Stephen Gilbert的网站上阅读更多信息。

Answer 2

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

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

Answer 3

试试这样的东西：

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

Answer 4

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

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

但这在我的iPad4上不起作用。以及偶然的任何使用：

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

以1或2的像素比例扼杀了我的iPad4上的反应。

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

然后我发现iPad上的全屏背景图像有问题，但那是另一回事。。。

非常感谢所有贡献者的想法，出于我的目的，我现在认为这个问题已经解决了。