@媒体屏幕 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;
    }
}

原文由 user2798091 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 NoobEditor 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

一种可能的解决方案包括

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

到 head 标签

原文由 Andrii Kovalenko 发布，翻译遵循 CC BY-SA 4.0 许可协议