メディアクエリを使用してhtmlテーブル内のクラスをターゲットにする方法は？

Question

私はこの問題に真剣に困惑しています。私はダン・モールのrecommended techniques for setting line breaksの1つを使用しようとしていますが、モバイルではHTMLの電子メール署名で、メディア照会がサポートされているように徐々に強化されています。私はテーブルのセル内でこれをやっていますが、trまたはtdにメディアクエリを適用するのではなく、スパンまたはbrタグをクラスに使用して、テキストでそれを実行しようとしています。ただし、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から該当するセクション：私はYahooが、時にはそれは - 私の上につまずく読むためだけここで標的ブラケットのクラスを試みる

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

をそれは両方の方法で行われました。主に、2つの電話番号で長い行を壊してみると、モバイルでのみ、そしてパイプの区切りを隠すために、運がないようにしようとしています。どんな助け？通常、テーブル内にMQを持つ対象はありませんか？

Answer 1

あなたのメディアクエリは問題ありません。 display:プロパティの「表示可能な」オプションは受け入れられないオプションです。displayとvisibilityを混同している可能性があります。

私はダンモールの元のアプローチがだと思います。はここで問題ないと思います。 .rwd_hiddenも使用しているようですので、彼のコードに追加しました。

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