如何创建最大宽度的媒体查询？

Question

我安装了一个安装了Boss 2.0主题的Wordpress，并且我想隐藏在移动设备上的自定义标题，只显示在桌面720px或更宽。

我创建了<div class="container" id="custom-header">

在我的CSS文件中我做了：

@media screen and (max-width: 720px) {
 /* Remove Header for phone portrait */
 #custom-header {
  display: none;
  }
}

显然它不起作用，但如果我尝试相反的话：

@media screen and (min-width: 720px) {
/* Remove Header for phone portrait */
#custom-header {
 display: none;
 }
}

当我拉伸窗口超过720px时，它可以完美地隐藏我的标题。

第一反射是添加display: none !important;但没有更好的结果。

任何将我的内容隐藏在宽度小于720px的设备上的解决方案？

Answer 1

可能你的“自定义标题”继承了另一个css，在开发者工具的样式元素上检查它（在主流浏览器中为f12）

您应该看到的另一件事是mediaQuerys中的级联声明 如果你使用max-width，rembeber会从高到低声明它们。

最小宽度从低到高。

希望对你有用

Answer 2

我不确定你是如何尝试减少到​​720px的。尝试切换google chrome开发人员工具中提供的设备模式。

Answer 3

你可以尝试

@media all and (max-width: 720px) {
 /* Remove Header for phone portrait */
 #custom-header {
  display: none !important;
  }
}

添加媒体，您将看到pC中的css更改

Answer 4

试试这种方式

@media (min-width: 320px) and (max-width: 720px) {
#custom-header {
 display: none;
 }
}