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

【问题标题】：possible to hide specific character within media queries?可以在媒体查询中隐藏特定字符吗？
【发布时间】：2012-03-28 23:04:29
【问题描述】：

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

我想知道，因为我有一个将它们用作分隔符的菜单，但在移动视口上的渲染效果很差，如果我能以某种方式隐藏它们，LOVE 也会如此。

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

有什么建议吗？

上午 10:38 更新： 感谢大家的精彩回复；我已经尝试建议将类添加到 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; }

}

【问题讨论】：

你能分享相关代码，或者更好的是，为它制作一个fiddle吗？

标签： jquery css media-queries responsive-design

【解决方案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，因为您可以使用一个图像，或几个字符或符号，或某种组合，而不仅仅是一条直线。

【讨论】：

我认为这是content 可接受的用例，尽管我非常支持what's stated here。
我同意 content 不应该用于，呃..内容，但在这种情况下是“|”绝对是演示文稿（正如 OP 想要在某些视图中隐藏它的事实所证明的那样）。

【解决方案2】：

您最好的选择可能是将您的管道更改为border-rights（或border-lefts）并添加间距以使它们看起来像管道，或者（不推荐）将您的管道字符包装在<span>s 或类似。然后你可以随意隐藏它们。

但是，不，您不能仅仅通过 CSS 以这种方式隐藏字符。

【讨论】：

谢谢，是的，我只是想给他们一个类，只是隐藏在视口，但是
，创建了一个换行符，现在我的管道在下面 10px我的菜单！！！
这是因为p 是一个块元素。使用span，因为它是内联的，或者相应地更改你的css。

【解决方案3】：

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

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

然后在你的媒体查询中定位它

.noshow { display: none }

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

【讨论】：