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

时间:2017-03-04 22:43:21

标签: html html-table media-queries html-email responsive-emails

我真的很难过这个。我试图使用Dan Mall的recommended techniques for setting line breaks之一,但在移动设备上使用html电子邮件签名,就像支持媒体查询的渐进式增强一样。我是在一个表格单元格中执行此操作,但我尝试在文本中,通过跨度或带有类的br标记,而不是将媒体查询应用于tr或{ {1}}。但是,即使在Chrome中进行测试,媒体查询也似乎根本不适用。对于我的媒体查询,我正在做:

td

以及我的HTML中的适用部分:

@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; }
}

在这里尝试支架类定位是因为我读雅虎有时会发现这一点 - 我已经两种方式都做到了。主要是试图用两个电话号码打破一条长线,只能在移动电话上,并隐藏管道分隔线,但没有运气。有帮助吗?通常不可能在表中使用MQ来定位事物吗?

1 个答案:

答案 0 :(得分:2)

您的媒体查询没问题。只是“可见”不是display:属性的可接受选项 - 我认为您可能displayvisibility混淆。

我认为Dan Mall的原始方法应该在这里没问题。看起来你也在使用.rwd_hidden,所以我已将它添加到他的代码中。

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