Question

我有3个样式表：

<link rel="stylesheet" media="(max-width: 579px)" href="css/style-small.css">
<link rel="stylesheet" media="(min-width: 580px) and (max-width: 799px)" href="css/style-md.css">
<link rel="stylesheet" href="css/style.css">

在我的style.css内有一个媒体查询：

@media only screen and (min-width:965px){
    //css styles
}

到目前为止，一切都很完美。但是我的style-md.css文件中有一个媒体查询：

@media only screen and (max-width:756px){
    nav.top-right{
        display: none;
    }

    blockquote{
        font-size: 1.35em;
        width: 80%;
    }
}

这完全被忽略了。我在使用chrome的开发者工具时可以看到css代码 - ＆gt;源。所以这不是一个令人耳目一新的问题。此外，这不是一个优先事项，因为当我做一个＆＃34; Inspect Element＆＃34;在目标元素上，它仍会显示代码，只有划痕;但它没有显示出来，它只是不存在。

Answer 1

我会使用非移动优先第一种方法方法简化它，并且只有一个样式表文件包含media queries。

@media only screen {
/*css styles*/
}
@media only screen and (max-width: 964px) {
/*css styles*/
}
@media only screen and (max-width: 799px) {
/*css styles*/
}
@media only screen and (max-width: 756px) {
/*css styles*/
}

@media only screen and (max-width: 579px) {
/*css styles*/
}

修改：（基于@Tony Barnes的建议），你也可以做移动第一种方法

会是这样的：

@media only screen { /*css styles*/ } @media only screen and (min-width: 579px) { /*css styles*/ } @media only screen and (min-width: 756px) { /*css styles*/ } @media only screen and (min-width: 799px) { /*css styles*/ } @media only screen and (min-width: 964px) { /*css styles*/ }

Answer 2

我知道这已经老了，但我遇到了类似的问题，发现我在HEAD中错过了一个元标记。

添加此解决了问题：

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

希望将来帮助某人。

为什么我的一个媒体查询不起作用？

2 个答案: