電子郵件模板td不堆疊移動版？

Question

我試圖在移動設備上查看電子郵件模板時將兩個表格單元彼此堆疊在一起。雖然代碼在瀏覽器中查看電子郵件時起作用，但它不在移動電子郵件客戶端中使用？

如何爲移動佈局製作表格堆棧？

媒體查詢：

@media only screen and (max-width: 600px) { 
    *[class=hero-block] { 
     width: 100%; 
     display: block !important; 
     text-align: center; 
     clear: both; 
    } 
} 

HTML：

<table bgcolor="000000" border="0" cellpadding="0" cellspacing="0" width="100%"> 
    <tr> 
     <td class="hero-block"> 
      <img src="hero.jpg" height="265" width="245" /> 
     </td> 
     <td class="hero-block" width="295"> 
      <table bgcolor="000000" border="0" cellpadding="0" cellspacing="0" width="100%"> 
       <tr> 
        <td align="left"> 
         <font color="#ffffff" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <img style="display: block; border:0; margin: 0; padding: 0;" src="x.gif" height="20" width="1" alt="x" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

Answer 1

TD的停止現在的Android堆疊安靜一段時間。一個解決方案是使用TH代替，它適用於Android和iOS。試試我下面的代碼在測試電子郵件：

@media only screen and (max-width: 600px) { 
 
     *[class=hero-block] th{ 
 
      width: 100%; 
 
      display: block !important; 
 
      text-align: center; 
 
      clear: both; 
 
     } 
 
    }

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="hero-block"> 
 
        <tr> 
 
         <th align="left" style="font-weight:normal;" bgcolor="#000000"> 
 
          <font color="#ffffff" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font> 
 
         </th> 
 
         <th align="left" style="font-weight:normal;" bgcolor="#ffffff"> 
 
          <font color="#000000" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font> 
 
         </th> 
 
        </tr> 
 
       </table>

使用此代碼時一定要使用字體的重量爲正常否則塊內即可將文字加粗。

乾杯