Как настроить таргетинг на класс в 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;

Просто попробуйте здесь настроить таргетинг на классы, потому что я читаю Yahoo, иногда спотыкаюсь об этом - я сделал это обоими способами. В основном, просто пытаясь разорвать длинную линию с двумя телефонными номерами, только на мобильном телефоне, и скрыть разделитель трубы, но не повезло. Любая помощь? Разве это не возможно целевые вещи с MQ в таблице?

Answer 1

Ваши медиа-запросы в порядке. Просто "видимый" не приемлемый вариант для display: собственность - я думаю, что вы могли бы иметь display путать с visibility,

Я думаю, что оригинальный подход Дэн Молл должен быть в порядке здесь. Похоже, вы также используете .rwd_hiddenЯ добавил это к его коду.

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