@媒体屏幕CSS不起作用

Question

我已将以下代码添加到我的 wordpress 主题中的 style.css 文件中，但它不起作用。 我希望正文背景更改为 768 和 1024 像素之间的屏幕宽度

CSS：

@media screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
{ 
    body {
        background: #fff;
        border-top: 2px solid #DDDDDD;
    }
}

Answer 1

您可能对提到样式的媒体查询的顺序有疑问

检查这个小提琴，更改浏览器宽度以查看媒体查询的实际效果

@media screen and (max-width : 1500px) {
    body {
        background: #000;
        border-top: 2px solid #DDDDDD;
    }
}

@media screen and (min-width : 768px) and (max-width : 1024px) {
    body {
        background: #fff;
        border-top: 2px solid #DDDDDD;
    }
}

这个小提琴工作正常，但如果你改变媒体查询的顺序，它就行不通了……你自己试试吧！

如果为一个属性找到多个样式，CSS 总是选择最后声明的样式。

例如：

@media (max-width: 1024px) {
  body {
    background: black;
  }
}

@media (max-width: 768px) {
  body {
    background: white;
  }
}

对于765px （因为两个 mq 都覆盖了这个宽度），选择的颜色将是white

Answer 2

一种可能的解决方案是包括

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

head标签

Answer 3

有时可能会错过在数字末尾添加 px

    @media screen and (max-width: 1024)

这将不起作用，因此应按以下方式添加 px

    @media screen and (max-width: 1024px)

Answer 4

尝试

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

}

Answer 5

您还可以创建另一个文件，例如： smallScreen.css ，并使用以下代码将其直接添加到主样式表下的 head 标记中：

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" media="only screen and (max-width:768px) "href="/smallScreen.css" />

如果“仅屏幕和... ”不起作用，您也可以在新文件中添加样式，您可以避免使用：仅