0

行っている電子メール キャンペーンの CSS とインライン スタイルに問題があります。

最初に、@media css を使用するときに要素を正しい順序で表示するために要素 (display:none;) を隠していたという点で、少しごまかしてしまいました。ここでの問題は、デスクトップ isp (gmail) で表示すると、(display:none;) が無視され、所々に二重のコンテンツが表示されることでした。そのため、二重のコンテンツが消えるように (display:none !important;) を使用し、モバイル版に影響を与えました。

オンラインで見たモバイル テンプレートがいくつかありますが、それらは複数のメール クライアントで機能しないため、あまりテストされていないようです。

提案やヘルプがあれば、コードはここにありますhttp://www.makeyourownmarket.com/test/test-doc.html

4

3 に答える 3

5

レスポンシブ メールのヒント:

  • すべてのCSS!importantに宣言を入れます@media only screen and (max-width: 480px)

  • 回避策を考えてください。うまくdisplay:none;いかない場合は、インライン CSS を試してから、モバイル スタイルでwidth:0;height:0;オーバーライドしてくださいwidth:100px !important;height:100px !important;

  • 広範なテストを行う必要があります。すべての重要な電子メール クライアントのアカウント/デバイスを用意するのが最善ですが、http: //www.emailonacid.com はピンチで機能します。

于 2013-02-15T18:14:57.410 に答える
4

HTML メールとその制限についてもう少し調査することをお勧めします。

この記事は良い出発点です: http://kb.mailchimp.com/article/how-to-code-html-emails

いくつかのヒント：

  • CSS を STYLE タグに配置しないでください。これは、すべてのメール クライアントで機能しないためです。
  • インライン CSS のみを使用する
  • レイアウトにテーブルを使用
  • メディア クエリが電子メール クライアントで一貫して機能するとしたら、私は非常に驚かれることでしょう。私はそれらを使おうとするのを避け、代わりに、最も人気のある電子メール クライアントで一貫して表示される、基本的で堅実な電子メール テンプレートの作成に集中します。
于 2013-02-15T10:27:12.873 に答える
-2

レスポンシブ デザインがメールに適しているとは思いません。多くのメール クライアントがあるため、通常、メールはテーブル内で作成されます。詳細については、Nettutsをご覧ください。

于 2013-02-15T10:29:00.440 に答える