为什么我的媒体查询被忽略了？

Question

我正在设计一个已经制作的网站，并且我放入我的CSS中的最大宽度低于980px的任何@media查询甚至不会在Chrome Inspector中显示，如果它的任何大小通常大于980px，则查询适用。< / p>

这不起作用

@media screen and (max-width: 979px){
    .custom-home-title-slider {
        color: red;
    }
}

这样做

@media screen and (max-width: 980px){
    .custom-home-title-slider {
        color: red;
    }
}

Answer 1

我知道这是一个相对较老的问题，但是我碰到了我认为是解决方案的问题。您需要添加

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

文件头中的

。不确定原因，但这似乎使某些浏览器（至少是Chrome）可以识别宽度小于980的媒体查询。