4

レスポンシブ メール テンプレートの作成方法

media-query を使用してレスポンシブ レイアウトを構築できますが、これらのスタイルは外部/内部 CSS でしか記述できません。DIV および外部/内部 CSS を使用できない電子メール テンプレート。レスポンシブ メール テンプレートを作成するにはどうすればよいですか。

ありがとう、シャニード

4

4 に答える 4

6

HTML メールでメディア クエリを使用することは、レスポンシブ HTML メールを開発するための良い解決策とは言えません。

Gmail は、HTML メールのヘッダーにある CSS を保持しません。これはメディア クエリがある場所なので、.. は機能しません。

Android はメディア クエリをサポートしていますが、せいぜいバグがあります。

疑似レスポンシブ HTML メールを作成する最善の方法は、流動的なレイアウトの HTML メールを作成することです。(簡単にするために) 1 列のレイアウトでメールをデザインします。複数列のレイアウトを使用して流動的なレイアウトを作成できますが、すぐにかなり複雑になる可能性があります。

レイアウトを通常どおりに設計し、すべてのスタイルをインライン化し、CSS スタイルではなく減価償却済みの HTML 属性を使用します。インラインであるかどうかは問題ではありません。CSS は HTML メールではうまく機能しません。控えめに使用し、回避できる場合はまったく使用しないでください。

要素に高さを割り当てず、幅をパーセント値でのみ割り当ててください。したがって、電子メールを表示するデバイスは、特定のピクセル サイズではなく、パーセンテージ値に基づいて表示する最適な幅を決定できます。

<table width="90%" cellpadding="0" cellspacing="0" border="0">...</table>

流動的なレイアウトの良い例を次に示します: http://woothemes.createsend1.com/t/ViewEmail/y/1D01C6AE9D028347

于 2013-12-09T01:37:06.657 に答える
-3

@media クエリを最初に学習する必要があります。情報が多いのでここに書くものではありません。

于 2013-12-09T01:47:01.183 に答える