미디어 쿼리가 모바일에 열을 쌓지 않고 다른 스타일을 적용하고 있습니까?

Question

내 미디어 쿼리에 약간의 문제가 있습니다. 사용 방법에 익숙하지 않습니다. 이것은 html 전자 메일을 반응 적으로 렌더링하는 "가장 안전한"방법입니다.

내 미디어 쿼리 : 참고로

@media only screen and (max-width: 600px){ 
* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
} 
.submitBtn { 
margin: auto !important; 
float: none !important; 
} 
td, h3, h4, .branding, .paragraph, .container { 
display: block !important; 
width: 100% !important; 
float: none !important; 
height: auto !important; 
margin: auto !important; 
padding: 0 !important; 
text-align: center !important; 
} 
td { 
padding-right: 5px !important; 
padding-left: 5px !important; 
padding-top: 10px !important; 
padding-bottom: 15px !important; 
} 
td.branding, img.branding { 
display: block !important; 
text-align: center !important; 
margin: 0 auto !important; 
} 
.branding { 
padding-bottom: 10px !important; 
} 
.toggle { 
text-align: left; 
} 
table.center { 
text-align: center !important; 
} 
.display-none { 
display: none !important; 
} 
.checkbox { 
    display: block !important; 
    margin: auto !important; 
    max-width: 100% !important; 
    float: none !important; 
} 
} 

, 나는 머리에 장치 폭에 대한 메타 않아도됩니다. 다른 모든 스타일링은 두 개의 td가있는 위치를 제외하고는 렌더링됩니다. 모바일에 겹쳐 있지 않습니다. 이 반응 설정 관리자 &를 사용하여 크롬에서

는, 그들이 모바일에 적재해야 하지만 실제로 자신에게 그것을 테스트 할 때 그렇지 않은 보여줍니다.

<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="100%" align="center"> 
          <tr> 
           <td class="description" align="left" width="75%"> 
           <h4 class="indent padding-t"><span class="normal middle"></span></h4> 
           <p class="paragraph indent">Y 
           </p> 
           </td> 
           <td class="checkbox"> 
           <input type="checkbox" id="checkbox" name="" onclick="changeValue()" value=""> 
           <label class="toggle" for="checkbox"></label> 
           <input type="hidden" id="hidden" name="" checked value=""> 
           </td> 
          </tr> 
          </table> 

감사를 사전에 도움과 I를 위해 :

내 첫 번째 모듈 적재해야하는 스태킹해야

<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="100%" align="center"> 
    <tr> 
     <td class="branding logo" width="315" align="left">Stacking image goes here 
     </td> 
     <td class="branding" width="315" align="right"><span class="lighter">Text & More</span> <span class="normal">Stacking text goes here</span> 
     </td> 
    </tr> 
</table> 

내 다른 비트 (I 민감한 데이터를 제거하기 위해 자리를 넣어) 나는 그것이 신기하다는 것을 알고 있기 때문에 이것이 "루키"오류라면 사과드립니다!

Answer 1

내 CSS의 순서가 모든 것을 망쳐 놓고있는 것으로 나타났습니다. 미디어 쿼리 내부의 모든 스타일을 삭제하고 다시 구성하여 매력처럼 작동합니다!