jquery - 可以在媒体查询中隐藏特定字符吗？

Question

我想知道是否可以简单地在特定视口(viewport)的媒体查询中隐藏“管道”(例如: | )字符？

我想知道，因为我有一个使用它们作为分隔线的菜单，但在移动视口(viewport)上的渲染效果非常差，所以如果我能以某种方式隐藏它们，我会喜欢。

我想我可能必须在移动视口(viewport)中使用一些 jQuery 和我定义的 CSS？

有什么建议吗？

上午 10:38 更新:感谢大家的精彩回复；我已经尝试建议向 span 标记添加类，现在我的管道没有显示 accross，下面是我在 footer.php 中的标记以及媒体 Q 中相应的隐藏。

<li class="f"><a href="#" class="scrolltime">EXPLORE</a> <span class="pipe"> | </span></li>

<li class="f"><a href="#" class="scrolltime"> FOR</a><span class="pipe"> | </span></li>

<li class="f"><a href="#" class="scrolltime">ENHANCED</a><span class="pipe"> | </span> </li>

<li class="f"><a href="/iframe/buybutton.html" class="fancybox-iframe" style="color:#C6C699;">Iframe</a></li>
</ul>

CSS3:

/* Smartphones (Landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {


#topvidarea {
    margin-left: 24%;
    margin-right: 20%;
    margin-top: -265px;
    max-width: 400px;
}

#topbgimg { display: none; }

#topbtn, #topbtn2, #topbtn3 {
    border: 0 solid #C6C699;
    display: inline;
    float: left;
    font-family: Georgia;
    margin-right: 5px;
    text-align: center;
    width: 122px;
}


#topvidarea {
    margin-left: 24%;
    margin-right: 20%;
    margin-top: 15px;
    max-width: 400px;
}

#footer a {
    font-size: 8px;
    margin: 0;
    padding: 12px;
    text-indent: 1px;
}

.f {
    float: none;
    margin-top: -2px;
    padding-left: 0;
}

.pipe { display: none; }

}

Answer 1

这里的根本问题是您使用内容(管道字符)进行演示(装饰)。避免这种情况是首先使用 CSS 的主要原因之一。想象一下一个视力障碍者使用您的网站。他们怎么样screen reader应该发音“|”吗？如果您不确定，很可能应该将其从内容层 (HTML) 移至表示层 (CSS)。 (实际上，屏幕阅读器足够聪明，可以避免这种常见的陷阱，但这仍然是一种有用的心理练习。)

正如@ChrisN建议的那样，您可以使用border-right或-left，但另一种选择是使用:after选择器。例如，而不是这样:

<nav>
  <ul>
    <li>Foo</li> |
    <li>Bar</li> |
    <li>Baz</li>
  </ul>
</nav>

从内容中删除管道:

<nav>
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</nav>

然后在表示层 (CSS) 中使用 :after 选择器在它们之间放置管道:

@media ... {
  nav li:after {
    content: "|";
  }

  /* no "|" after the last one, though */
  nav li:last-child:after {
    content: normal;
  }
}

您当然可以使用 padding 属性在“|”周围放置所需的空间量。

这种方法可以避免使用额外的标记来压垮您的页面，并且还为您提供了比例如更多的灵 active 。 border-right，因为您可以使用图像、多个字符或符号、或某种组合，而不仅仅是一条直线。