미디어 쿼리를 통해 html 테이블 내에서 클래스를 대상으로 지정하는 방법은 무엇입니까?

Question

나는이 문제에 심각하게 난처합니다. Dan Mall의 recommended techniques for setting line breaks 중 하나를 사용하려고 시도하고 있지만 모바일에서는 html 전자 메일 서명으로 미디어 쿼리가 지원되는 점진적 향상 기능을 사용하고 있습니다. 저는 테이블 셀에서이 작업을 수행하고 있지만 tr 또는 td에 미디어 쿼리를 적용하는 대신 클래스에 span 또는 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에서 해당 부분은 :

<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을 혼동했을 수 있습니다.

Dan Mall의 원래 접근 방식은 이어야합니다.은 여기에서 잘해야합니다. 당신도 .rwd_hidden을 사용하고있는 것처럼 보이므로 코드에 추가했습니다.

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