如何通過媒體查詢在html表中定位類？

Question

我很認真地對這一個難住。我試圖使用Dan Mall的recommended techniques for setting line breaks之一，但在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:000000000" style="text-decoration:none; border:none; color:#304958;">(000) 000-0000</a></span> 
&nbsp;<br class="rwd_break" /> 
<span style="padding:0; color:#D4E3E9;" class="rwd_hidden">|</span>&nbsp; 

只是想支架類，因爲我看過雅虎位置定位有時絆倒說 - 我兩種方式都做到了。主要是試圖用兩個電話號碼打破長排，只有在移動設備上，並隱藏管道分隔器，但沒有運氣。任何幫助？通常情況下，在表中使用MQ來定位事件通常是不可能的？

Answer 1

您的媒體查詢沒有問題。只是「可見」不適用於display:屬性 - 我認爲您可能有display與visibility混淆。

我覺得丹商城原來的做法應該在這裏很好。它看起來像你也使用.rwd_hidden，所以我已經添加到他的代碼。

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