Gmailの反発メールテンプレートが頭の中で動作しない

"最初から"メールテンプレートを作成することに苦労しています（CMSは私のやりたいことに適切でないため、）。Gmailの反発メールテンプレートが頭の中で動作しない

一般的な電子メールが

テキストを除いてよさそうだ - となることがあるwidth 50%と画像：width: 100%

.responsive-width { 
    width: 50%; 
} 

@media only screen and (max-width: 480px) { 
    .responsive-width { 
     width: 100% !important; 
     min-width: 100% !important; 
    } 
} 



<td valign="top" style="padding: 0!important;"> 
    <table class="responsive-width" align="right" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td class="align-mid" style="padding: 0!important;text-align: center !important;"> 
     <img src="myimg-url.jpg" alt="newsletter photo cover"> 
     </td> 
    </tr> 
    </table> 
    <table class="responsive-width" align="left" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td style="padding: 0!important;"> 
     <h2 class="no-top">Title!</h2> 
     <div class="grey other-font"> 
      TEXT 
      <br> 
      <a class="btn align-mid button-orange read-more left" href="">READ MORE</a> 
     </div> 
     </td> 
    </tr> 
    </table> 
</td>

で

画像

テキスト

私は削除のためのインラインスタイルより多くの可視性。

メディアクエリは、<style>要素内の<head>にあります。しかし、Gmailでサポートされていないと聞きました。

私はどのように応答するようにする必要がありますか？

出典

2016-09-05 Jay Cee

このようにすべてインラインで実行できます。

<img src="myimg-url.jpg" width="480" alt="..." border="0" style="width:100%; max-width:480px;">

このようにすれば、完全に反応するイメージが得られ、クライアントの不一致を回避できます。

さらに、クラスを追加して、このような要素をターゲットにすることができます。

img.thumbnail{ 
    max-width:480px !important; 
    width: 100% !important; 
}

出典

2016-09-06 19:11:39

Gmailの反発メールテンプレートが頭の中で動作しない

答えて

関連する問題