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

Question

我有一个Wordpress与老板2.0主题安装和自定义标题，我想隐藏在移动设备上，只显示它在桌面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中的级联声明，如果你使用-width，记住从高到低声明它们。

最小宽度从低到高。

希望为你工作

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变化