如何通过媒体查询在 html table 中定位 class?
How to target class within html table via media query?
我被这个严重难住了。我正在尝试使用 Dan Mall 的 recommended techniques for setting line breaks 之一,但在移动设备上使用 html 电子邮件签名,就像支持媒体查询的渐进式增强功能一样。我在 table 单元格中执行此操作,但我试图通过跨度或带有 class 的 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:000000000" style="text-decoration:none; border:none; color:#304958;">(000) 000-0000</a></span>
<br class="rwd_break" />
<span style="padding:0; color:#D4E3E9;" class="rwd_hidden">|</span>
只是在此处尝试括号 class 定位,因为我读到 Yahoo 有时会遇到这个问题——我两种方法都做过。主要是试图用两个 phone 号码打破长线,只在移动设备上,并隐藏管道分隔线,但没有运气。有什么帮助吗?通常不可能在 table 内使用 MQ 定位事物吗?
你的媒体查询没问题。只是 "visible" 不是 display:
属性 可接受的选项 – 我认为您可能会将 display
与 visibility
混淆。
我觉得 Dan Mall 原来的做法 应该 在这里没问题。看起来您也在使用 .rwd_hidden
,所以我已将其添加到他的代码中。
@media screen and (min-device-width:481px) {
.rwd_hidden,
.rwd_break {
display:none;
}
}
我被这个严重难住了。我正在尝试使用 Dan Mall 的 recommended techniques for setting line breaks 之一,但在移动设备上使用 html 电子邮件签名,就像支持媒体查询的渐进式增强功能一样。我在 table 单元格中执行此操作,但我试图通过跨度或带有 class 的 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:000000000" style="text-decoration:none; border:none; color:#304958;">(000) 000-0000</a></span>
<br class="rwd_break" />
<span style="padding:0; color:#D4E3E9;" class="rwd_hidden">|</span>
只是在此处尝试括号 class 定位,因为我读到 Yahoo 有时会遇到这个问题——我两种方法都做过。主要是试图用两个 phone 号码打破长线,只在移动设备上,并隐藏管道分隔线,但没有运气。有什么帮助吗?通常不可能在 table 内使用 MQ 定位事物吗?
你的媒体查询没问题。只是 "visible" 不是 display:
属性 可接受的选项 – 我认为您可能会将 display
与 visibility
混淆。
我觉得 Dan Mall 原来的做法 应该 在这里没问题。看起来您也在使用 .rwd_hidden
,所以我已将其添加到他的代码中。
@media screen and (min-device-width:481px) {
.rwd_hidden,
.rwd_break {
display:none;
}
}