如何通过媒体查询在HTML表中定位类

Question

我对此感到非常困惑。我试图使用Dan Mall推荐的技术之一来设置销售线路，但是在HTML电子邮件签名中移动中，就像支持媒体查询的渐进增强一样。我正在在表单元格中进行此操作，但是我正在尝试通过带有类的跨度或br标签在文本中进行此操作，而不是将媒体查询应用于tr或td。但是，即使在Chrome进行测试时，媒体查询似乎根本没有应用。对于我的媒体查询，我正在做：

@media screen and (max-device-width:480px) {
  span[class="rwd_hidden"] { display:visible !important; }
  br[class="rwd_break"] { display: none !important; }
}
@media screen and (min-device-width:481px) {
  span[class="rwd_hidden"] { display:hidden !important; }
  br[class="rwd_break"] { display: hidden !important; }
}

和我的HTML的适用部分：

<span style="font-family:Geneva,Tahoma,Arial;
font-weight:bold; color:#5D889D; font-size:11px; line-height:20px;">Office</span>
<span style="font-family: Tahoma,Verdana,Arial; font-weight:normal; font-size:12px; line-height:20px; color:#304958;"><a href="tel:[phone]" style="text-decoration:none; border:none; color:#304958;">[phone]</a></span>
&nbsp;<br class="rwd_break" />
<span style="padding:0; color:#D4E3E9;" class="rwd_hidden">|</span>&nbsp;

只是尝试在这里定位的括号类别，因为我读过雅虎有时会偶然发现这一点 - 我已经做到了这两种方式。主要只是试图用两个电话号码打破一条长线，仅在移动设备上隐藏管道分隔线，但没有运气。有帮助吗？通常不可能在表中使用MQ目标？

Answer 1

您的媒体查询很好。只是"可见"不是display:属性的可接受的选择 - 我认为您可能会使display与visibility混淆。

我认为Dan Mall的原始方法应该在这里很好。看来您也在使用.rwd_hidden，所以我已经将其添加到他的代码中。

@media screen and (min-device-width:481px) {
  .rwd_hidden,
  .rwd_break {
      display:none;
  }
}