可以隐藏媒体查询中的特定字符？

Question

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

我很想知道,因为我有一个菜单,将它们用作分隔符,但在移动视口中呈现的效果非常差,所以如果我能以某种方式隐藏它们,那就太爱了.

我想我可能不得不在移动视口中使用我定义的CSS的一些jQuery？

有什么建议？

更新10:38 AM:感谢你们的回应!我已经尝试过将类添加到span标签,现在我的管道没有显示,下面是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的主要原因之一.想象一下使用您网站的视力障碍者.他们的屏幕阅读器应该如何发音"|"？如果您不确定,可能应该从内容层(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>

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

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

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

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

这种方法避免了使用额外标记来减轻页面的重量,并且还提供了比例如更多的灵活性border-right,因为您可以使用图像,或多个字符或符号,或某些组合,而不仅仅是一条直线.