@媒体屏幕CSS不起作用答案

【问题标题】：@ media Screen CSS not working@媒体屏幕CSS不起作用
【发布时间】：2014-01-13 20:53:26
【问题描述】：

我已将以下代码添加到我的 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;
    }
}

【问题讨论】：

标签： html css wordpress

【解决方案1】：

试试

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

}

【讨论】：

它对我有用。您是否有任何其他规则使其覆盖
@user2798091 检查这个小提琴。 jsfiddle.net/surjithctly/hDQAP 有效吗？
也许你应该添加!important

【解决方案2】：

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

check this fiddle，更改浏览器宽度以查看正在运行的媒体查询

@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（因为两个 m.q 都覆盖了这个宽度）选择的颜色将是white

【讨论】：

感谢这工作。我刚刚将代码中的 max-device-width 更改为 max-width

【解决方案3】：

一种可能的解决方案包括

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

致head标签

【讨论】：

【解决方案4】：

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

    @media screen and (max-width: 1024)

这样不行，所以应该添加px如下

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

【讨论】：