Question

我想知道我是否可以在特定视口中隐藏我的媒体查询中的' pipe '（例如：|）字符？

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

我想我可能不得不在移动视口中使用我定义的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的主要原因之一。想象一下使用您网站的视力障碍者。他们的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属性在“|”周围放置所需的空间量。

这种方法可以避免使用额外的标记来压缩您的网页，并且还提供比例如border-right，因为您可以使用图片，或多个字符或符号，或某些组合，而不只是一条直线。

Answer 2

您最好的选择可能是将管道更改为border-right s（或border-left s）并添加间距以使它们看起来像管道，或者（不推荐）将管道字符包裹在{ {1}}等。然后你可以随意隐藏它们。

但是，不，你不能通过CSS以这种方式隐藏角色。

Answer 3

我认为你不能专门隐藏这样的字符，但你可以这样（非常简单的例子......）

<span class="noshow> | </span> Home <span class="noshow> | </span About

然后在您的媒体查询中定位

.noshow { display: none }

这是不整洁的，但它确实有效。

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

3 个答案: