Question

menu1文本显示在页面加载上并在更改屏幕宽度时消失，但是菜单2文本从不显示（显示：块）？

<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<style type="text/css">
 @media screen and (max-width: 700px) {
 #menu1   { display:none;  }
 #menu2   { display:block; }
}
#menu2    { display:none;  }
</style>
</head>
<html>
<body>
  <div id="menu1">menu1</div>
  <div id="menu2">menu2</div>
</body>
</html>

Answer 1

在CSS中，媒体查询需要低于元素的正常状态才能覆盖样式;因此，您应该将订单撤销到：

#menu2    { display:none;  }

@media screen and (max-width: 500px) {
 #menu1   { display:none;  }
 #menu2   { display:block; }
}

JS Fiddle

与任何css样式（或后备样式）相同。要调用的最后一种样式是优先的样式。如果该样式的要求不适用，则同一属性的下一个样式将（等等）。

css display：block不会在@media屏幕宽度更改时呈现div区域

1 个答案: