1

我有 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 的开发者工具 -> Sources 时可以看到 css 代码。所以这不是提神醒脑的问题。此外，这不是优先级问题，因为当我对目标元素执行“检查元素”时，它仍然会显示代码，只是被划伤；但它没有显示出来，它只是不存在。

4

2 回答 2

3

我知道这很旧，但我刚刚遇到了类似的问题，发现我在 HEAD 中缺少一个元标记。

添加这个解决了这个问题：

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

希望它对将来的人有所帮助。

于 2017-03-22T19:46:49.020 回答
2

我会简化它，并且只有一个样式表文件，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*/
}
于 2015-04-08T16:27:59.967 回答