내 미디어 쿼리에 약간의 문제가 있습니다. 사용 방법에 익숙하지 않습니다. 이것은 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 민감한 데이터를 제거하기 위해 자리를 넣어) 나는 그것이 신기하다는 것을 알고 있기 때문에 이것이 "루키"오류라면 사과드립니다!
** ** 모든 것은 ** 중요합니다! 그들을 제거하십시오. 그것들은 반드시 실제 고통을 무시하는 의지는 아닙니다. 또한 "모바일 우선"_을 (를) 위해 설계하지 않은 것처럼 보이고 레이아웃 용 테이블을 사용 중일 수도 있습니다. 모바일 우선 디자인에서 기본 스타일은 데스크톱이 아닌 모바일 뷰에 적용되며 더 큰 뷰포트의 경우 필요에 따라 수정됩니다. – hungerstar
@hungerstar 예, 불행히도 테이블을 사용해야하는 모든 이메일 클라이언트에서 올바르게 렌더링되도록 html 이메일을 사용하고 있습니다. 중요한 것을 사용하는 것과 같은 것이 적용되는 것처럼 보입니다. 제거 할 때 스타일이 적용되지 않습니다. –
이메일은 정확하지만 CSS는 정확하지 않다고 생각합니다. [ZURB 이메일 템플릿] (https://zurb.com/playground/responsive-email-templates) CSS 중 일부를 살펴보면'! important'가 많이 표시되지 않습니다. – hungerstar