Question

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

Answer 1

您可能在媒体查询的顺序中遇到问题，其中提到了样式

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

这个小提琴工作得很好，但如果你改变媒体查询的顺序它就行不通了......试试吧！

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

例如：

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

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

765px（因为m.q覆盖此宽度）所选颜色为white

Answer 2

试

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

}

Answer 3

可能的解决方案之一包括

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

到head标签

@ media Screen CSS无效

3 个答案: