Question

我尝试在我的CSS中使用媒体查询和display: none来隐藏部分导航条文本，当屏幕尺寸小于600像素时。

为什么它不起作用 - 原始链接文本保持在任何屏幕宽度：

＆＃13;

@media all and (min-width: 0.1px) and (max-width: 599.9px) {
  #mobhide {
    display: none !important;
  }
}

＆＃13;

<a href="/about.html">ABOUT<span class="mobhide"> US</span></a>
<span style="width:1vw;display:inline-block">|</span>
<a href="/cookies.html">COOKIES<span class="mobhide"> & PRIVACY</span></a>
<span style="width:1vw;display:inline-block">|</span>
<a href="/terms.html">TERMS<span class="mobhide"> & CONDITIONS</span></a>

＆＃13;

Answer 1

您正在HTML中使用课程Visual C++并在CSS中使用.mobhide，另外，请单独使用#mobhide和!important来完成您想要的工作。

max-width:600px

@media all and (max-width: 600px) {
  .mobhide {
    display: none;
  }
}

请查看有关The Difference Between ID and Class

的博客文章

使用span类和媒体查询隐藏小视口上的文本

1 个答案: