@ media Screen CSS无效

我已经在我的wordpress主题中的style.css文件中添加了以下代码,但它不起作用.我希望在768和1024px之间的屏幕宽度更改正文背景

CSS:

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

NoobEditor.. 12

您可能在提及样式的媒体查询的顺序方面存在问题

检查这个小提琴,更改浏览器宽度以查看正在运行的媒体查询

@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;
    }
}

这个小提琴工作得很好,但如果你改变媒体查询的顺序它就不会工作......试试吧!

如果为attrib找到多个样式,CSS总是选择声明的最后一个样式.

例如:

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

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

因为765px(因为两个mq覆盖这个宽度)选择的颜色将是white