0
私は自分のメディアクエリに少し問題があります（私はこれらを使用するのが初めてです。これは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;
}
}
、私は頭の中で、デバイス幅のメタを持っています。他のスタイリングはレンダリングされていますが、どこに2つのtdがあるかを除いて、彼らはモバイル上にスタッキングしていません。それは応答設定インスペクタ&を使用してChromeで
は、それは彼らがモバイルにスタッキングされなければならないが、私は実際に自分自身にそれをテストするとき、彼らはありません示しています。
スタッキングされなければならない私の最初のモジュール（私が機密データを削除するためにプレースホルダを置く）
<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>
スタッキングされなければならない私の他のビット：あなたの助けと私のために事前に
<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>
感謝を私はそれが確信しているので、これは "ルーキー"エラーである場合は謝罪！
**すべて**は '！important'です。削除してください。彼らは必ずしも本当の痛みを上書きする意志ではありません。また、あなたは "モバイルファースト" _のためにデザインしていないようだし、レイアウトのためにテーブルを使用しているかもしれない。モバイルファーストデザインでは、デフォルトのスタイルがデスクトップではなくモバイルビューに適用され、大きなビューポートでは必要に応じて変更されます。 – hungerstar
@hungerstarはい、それは、残念ながらテーブルを使用する必要があるすべての電子メールクライアントで正しくレンダリングされるようにするためのHTMLメールです。重要なことは、同じことが当てはまるようです。それを取り除くと、スタイリングは適用されません。 –
私はそれが電子メールのために正確だと思うが、CSSのためではない。 [ZURB Email Templates]（https://zurb.com/playground/responsive-email-templates）CSSのいくつかを見ると、私はたくさんの '！important'を見ません。 – hungerstar