メールニュースレターの「反応性」幅をどのように追加しますか？

Question

私のニューズレターのテーブルにwidthを追加すると、すべての電子メールクライアントに対応できるようになりますか？

style="width: 100%" 

B

style="width: 300px" 

C

width="300" 

D

width="300px" 

E

width="100%" 

Answer 1

1. 代わりwidth属性の使用styleそれはHTML5

2. に推奨されませんように私はスタイルでそれので、一緒に100％の幅と最大幅を示唆960ピクセルより広い画面で次のラインを見つけるのは快適ではありません。デスクトップのOutlookとモバイルGmailでは、あなたがハイブリッド/スポンジ状のアプローチ必要を含むALL電子メールクライアント、カバーに

   <div style="width:100%;max-width:960px;">your content here</div> 
   

Answer 2

：その中核に

<div style="max-width: 300px;"> 
    <!--[if (gte mso 9)|(IE)]> 
    <table cellspacing="0" cellpadding="0" border="0" width="300"><tr><td> 
    <![endif]--> 
    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 300px;"> 
    /* email code */ 
    </table> 
    <!--[if (gte mso 9)|(IE)]> 
    </td></tr></table> 
    <![endif]--> 
</div> 

は、それがMAX-使用していますwidthとmin-widthは厳密なベースラインを適用して（ある程度の動きを許す）、Outlookには幅広く幅を固定しています。モバイルフレンドリなベースラインが設定されると、メディアクエリはそれをサポートするクライアントで電子メールを徐々に強化します。

かなり冗長で、基本的に2セットのマークアップ（デスクトップOutlook用と1人用）が必要ですが、この方法では主要な電子メールクライアントで全面的なカバレッジが得られます。

This templateは、このコードの基本的なバージョンを示しています。