web-dev-qa-db-ja.com

レスポンシブメールテンプレートのメディアクエリ

レスポンシブメールテンプレートを作成する必要があります。私は調査を行い、メディアクエリが電子メールクライアントによって広くサポートされていないことを知りました。

そこで、メディアクエリを使用せず、display: inline-block; max-width:290px;を使用して列をスタックしました。

  1. しかし、モバイル版のフォントサイズを変更したい場合はどうなりますか？また、クライアントがいくつかのブロックをモバイルでは表示したいがデスクトップでは表示したくない場合があります。メディアクエリなしでこれらを達成するにはどうすればよいですか？

  2. また、私の場合、スタイルルールとメディアクエリを追加すると、iOSはメディアクエリをサポートしていると思います。ただし、メディアクエリでのルールは表示されませんが、<style></style>で定義されている他のルールは問題なく機能します。

テンプレートは次のようになります。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
   table {
       font-size: 24px;
   }
   #tdtoshowinmobile {
       display: none;
   }
   @media only screen and max-device-width(767px){
       table {
           font-size: 32px !important;
       }
       #tdtoshowinmobile {
           display: block !important;
       }
   }
</style>
</head>

<body>


    <table>
        ...tr...td....
    </table>
</body>

上記のテンプレートは、インライン要素に通常のルールを追加しますが、私の場合はメディアクエリを削除します。メールクライアントがスタイルタグを削除してインライン要素に追加するという記事を読みました。また、メディアクエリはインラインで定義できないため、無視されていると思います。

だから、再び私の質問は次のとおりです。

  1. メディアクエリを使用せずにレスポンシブメールテンプレートのfont-sizeやcolorなどを変更するにはどうすればよいですか？

  2. メディアクエリを正しい方法で追加する方法は？（私にとっては、styleタグにメディアクエリを追加しても機能しません）

cssemailmedia-querieshtml-emailemail-templates
5
Mark Wilson

1メディアクエリを使用してのみ実行できると考えてください。
一部の人気のあるモバイルメールクライアントはメディアクエリをサポートしているので、私の意見ではそれだけの価値があります。

2このコードがお役に立てば幸いです

@media screen and (max-device-width: 767px),
screen and (max-width: 767px)     {

}

また、多分いくつかを使用してください doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

複数の列を持つレスポンシブメールの例を探している場合は、 litmus または他の無料テンプレートをご覧ください（ this 例として本当に良さそうです）

4
Arek Szczerba