个人中心
gpt4 book ai didi

html - CSS 显示 :block will not render a div area as visable on @media screen width change

转载 作者：太空宇宙 更新时间：2023-11-04 12:10:49 24 4
gpt4 key购买 nike

menu1 文本在页面加载时显示并在更改屏幕宽度时消失得很好但 menu2 文本从不显示(显示: block )？

<!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>​

最佳答案

在 CSS 中，媒体查询需要低于元素的正常状态以覆盖样式；因此，您应该将顺序反转为:

#menu2    { display:none;  }

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

JS Fiddle

它与任何 css 样式(或后备样式)相同。最后调用的样式是优先的样式。如果该样式的要求不适用，则同一属性的下一个样式将适用(依此类推)。

关于html - CSS 显示 :block will not render a div area as visable on @media screen width change，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29057109/

24 4 0
文章推荐： javascript - 如何在 CSS 中修复一个图像与另一个图像的比较？
文章推荐： c++ - 将类类型传递给 Windows 窗体构造函数并必须将其转换为类指针才能使用它
文章推荐： c# - 如何从 Internet Explorer 获取与 cookie 关联的到期日期和标志？
文章推荐： jquery - 如何停止两个动画之间的延迟？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com