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

Question

我曾尝试在 css 中使用媒体查询和 display: none 在屏幕尺寸小于 600 像素时隐藏部分导航栏文本。

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

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

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

Answer 1

您在 HTML 中使用 class.mobhide 并在 CSS 中使用 #mobhide，并且避免使用 !important 和 max-width:600px一个人就能如愿以偿

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

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

看看这个博客 post 关于 The Difference Between ID and Class

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

Hiding text on small viewports using span class and media queries

html

css

media-queries