【问题标题】:How to reverse the effect of "display:none"如何反转“显示:无”的效果
【发布时间】:2026-01-03 07:30:01
【问题描述】:

我正在制作我的第一个响应式网页。它是桌面优先的,因为它是一个简单的单列页面,我只需要一个媒体查询,用于移动设备。我有一个与移动设备不同的桌面导航栏。所以我把两个导航都放在了 HTML 中。我在css的主要部分将移动设备的导航设置为“display:none”,这使它从桌面版本中消失了。我在查询中将桌面的导航设置为“display:none”,这使得该导航从移动设备中消失。

问题是我无法在移动版本中再次显示手机的导航。如何撤消移动查询中的“display:none”?

(页面为http://www.birdwatching.com/optics/2018_Kowa_scope/kowa-tsn-553-review.html

【问题讨论】:

  • 欢迎来到 Stack Overflow!寻求代码帮助的问题必须包含在问题本身最好是在堆栈片段中重现它所需的最短代码。尽管您提供了一个链接,但如果它变得无效,那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/demo doesn't work can I just paste a link

标签: html css


【解决方案1】:

在移动媒体查询中,对您隐藏的移动导航执行 display:block,对桌面导航不显示任何内容。

【讨论】:

    【解决方案2】:

    如果你使用 visibility:visible 和 visibility:hidden 代替,你就不必担心元素的显示之前设置为什么

    【讨论】:

      【解决方案3】:

      display:revert 会将显示设置设置为之前的值。这样您就不必担心隐藏之前的显示类型(例如块、flex 等)。

      更多阅读

      【讨论】: