在移动视图中使用 css 显示隐藏的 div答案

【问题标题】：To show a hidden div using css in mobile view在移动视图中使用 css 显示隐藏的 div
【发布时间】：2019-02-15 21:59:47
【问题描述】：

这是我的 div 内容：

<div style="display:none;" id="sidebar">
<ul  class="nav navbar-inverse" style="list-style:none;">
<li><a href="#ccc">ccc</a></li>
<li><a href="#bbb">bbb</a></li>
</ul>
</div>

我默认使用内联样式隐藏它。现在我想要的是，只在移动视图中显示这个 div。

我试过这样：

@media only screen and (max-width: 990px) {
        #sidebar { 
         display: block;
        }
      }

但它没有显示 div，它仍然是隐藏的。如何使其仅在移动视图中可见？

给我一些建议。

【问题讨论】：

查看http://stackoverflow.com/questions/11796297/div-show-hide-media-query
也许将内联样式取出并将其作为一个类放入，然后在您的媒体屏幕中覆盖该类。
@GaneshSalunkhe 谢谢你......它的作品。 :-)
尝试使用 min-width 代替 max-width
@aggy 。很高兴我能帮上忙。

标签： html css responsive-design

【解决方案1】：

内联样式将覆盖样式表中的任何样式。我不建议使用 !important，因为维护起来可能是一场噩梦。

只需取出你的内联样式：

<div id="sidebar">
  <ul  class="nav navbar-inverse" style="list-style:none;">
    <li><a href="#ccc">ccc</a></li>
    <li><a href="#bbb">bbb</a></li>
  </ul>
</div>

然后把它放在你的样式表中：

#sidebar { 
  display: none;
}
@media only screen and (max-width: 990px) {
  #sidebar { 
    display: block;
  }
}

【讨论】：

是的，这是个好主意。正常情况下请不要使用 inline。

【解决方案2】：

您可以使用!important 覆盖CSS 规则，但这并不容易维护。 :)

【讨论】：

是的，这就是为什么我说不容易维护。

【解决方案3】：

像这样从您的内容中删除内联样式：

<header class="main-header">
  <div class="banner mobile_hide" role="banner">
    <img src="exemple_image_banner.jpeg" alt="Exemple Image Banner"/>
  </div>
</header>

在你的样式表中添加这个：

/* --- Hidden viewport --- */
@media only screen and (max-width: 700px) {
    .mobile_hide { display:none; }
}
@media (min-width:701px) and (max-width:1199px) {
    .tablet_hide { display:none; }
}
@media only screen and (min-width: 1200px) {
    .desktop_hide { display:none; }
}

【讨论】：