网站无法响应媒体查询

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等）中不起作用。我还使用Web Developer扩展将门户设置为正确的大小。我使用了头部metatag：

<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浏览器窗口，这是我选择的测试平台。要使用调整大小的浏览器，我需要使用：

@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上发现了全屏背景图像的问题，但那是另一个故事......

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