Html電子メール - 優先度を設定する

Question

<table width="100%;"> 
     <tr> 
     <td> <!--Right Space (Variable Width)--> </td> 
     <td> <!--content (Width Set - High Priority)--> </td> 
     <td> <!--Left Space (Variable Width --> </td> 
     </tr> 
    </table> 

画面サイズに応じて余白を変更する必要がある電子メールのコーディングに問題があります。それはメディアのクエリでうまく動作しますが、私はそれらをサポートしていないいくつかの電子メールクライアントがあることに気付きました。また、幅のパーセンテージを試してみましたが、コンテンツをモバイルサイズの画面で約90％、大きな画面で約50％にしたいと考えています。私はマージンを作成するためにテーブルと空のテーブルセルを使用しており、インラインスタイルのみを使用できます。

CSSのプロパティを設定する方法があるかどうかを知りたいのは、画面の幅が小さくなるとコンテンツセルのサイズが最も高く、左右の余白が幅が狭くなるようにすることです。

Answer 1

これは、max-widthの使用例のようです。要素のデフォルトの幅を90％に設定できますが、デスクトップの総表示幅の半分の最大幅を定義します。また、Outlookがこの属性をサポートしていないため、MSO条件付きを含める必要があります。 CSS (for HTML email) reference guide

は、以下を参照してください。

<!--[if (gte mso 9) | (IE)]><table align="center" width="640"><tr><td align="center"><![endif]--> 
<table align="center" width="100%" style="max-width:640px;"> 
<tr> 
<td align="center"> 
    <!--[if (gte mso 9) | (IE)]><table width="320" align="center"><tr><td align="center"><![endif]--> 
    <table width="90%" align="center" style="max-width:320px;"> 
    <tr> 
    <td align="center">This content will be at 90% width of the container up to 320px wide, where it will stop</td> 
    </tr> 
    </table> 
    <!--[if (gte mso 9) | (IE)]></td></tr></table><![endif]--> 
</td> 
</tr> 
</table> 
<!--[if (gte mso 9) | (IE)]></td></tr></table><![endif]--> 

Answer 2

私の経験では、電子メールクライアントではインラインスタイルしか使用できません。メールモバイルアプリケーションだけですべて振り回さないブラウザでemail.If内のコンテンツが開く電子メールのスイングをサポートしています。

あなたの条件によると、あなたは

<div><!--email client body--> 

    <table width="650px;padding:50px;"><!--you can give padding not only margin properties of CSS--> 
     <table style="width:100%"> 
      <!--content--> 
       <table style="padding:20px"></table><!--Again added to padding instead of margin---> 
     </table> 

    </table> 

</div> 

注は、コードの下に設定する必要があります争う