24

電子メール テンプレートについて次のように指定します。

<style>
  @import url("http://fonts.googleapis.com/css?family=Open Sans");
</style>

<div style="width:100%; background:#F2F2F2">
  <table style="padding: 25px; margin: 0 auto; font-family:'Open Sans', 'Helvetica', 'Arial';">
    <tr align="center" style="margin: 0; padding: 0;">
      <td>
        <table style="border-style:solid; border-width:2px; border-color: #c3d2d9;" cellspacing="0">
          <tr style="background-color: white;">
            <td style="width: 700px; padding: 10px 15px 10px 15px; color: #000000;">
              <p>Some content here</p>
              <span style="font-weight: bold;">My Signature</span><br/>
              My Title<br/>
              My Company<br/>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

テーブルの幅は正確に 700 ピクセルになります。これが必要です。ただし、幅が完全に固定されているため、幅が 700px 未満のデバイスではサイズ変更できません。しかし、td 要素を次のように変更すると:

<td style="max-width: 700px; width: 90%; padding: 10px 15px 10px 15px; color: #000000;">
   <p>Some content here</p>
   <span style="font-weight: bold;">My Signature</span><br/>
   My Title<br/>
   My Company<br/>
</td>

その場合、テーブルの幅はわずか 100px です。

テーブルが 700px になるように CSS を並べ替えて、ビューポートが小さくなるとサイズが変更されるようにするにはどうすればよいですか?

4

7 に答える 7

0

max-width は確実に十分にサポートされていません。使用する場合は、スタイル タグのメディア クエリで使用してください。ios、android、および windows phone の既定のメールはすべてそれらをサポートしています。(Gmail と Outlook モバイルはサポートしていません)

http://www.campaignmonitor.com/guides/mobile/targeting/

一番下のスターバックスの例を見てください

于 2013-09-27T15:21:41.397 に答える