通常のWeb開発のベストプラクティスでは、スタイルタグの間にスタイルを配置するか、スタイルシートをロードする必要があります。ただし、いくつかの電子メールクライアントはスタイルタグを無視し、インラインスタイルのみを実行することがわかりました（www.campaignmonitor.com）。私はそれに対処できますが、CSSがインラインメディアクエリをサポートしているかどうかはわかりません。デスクトップでのメールの表示を少し変えたいのですが。これに似たものがサポートされていますか？：
<div id="myDiv" style="@media screen and (max-width:480px;){ color:black; }"></div>
HTMLメールはまったく別の獣です。1999年のようにコーディングする必要があります。非常に限られたタグのセットを使用し、すべてまたはスタイルがインラインであることを確認してください。レイアウトにはテーブルを使用します。
メディアクエリを利用するには、両方を実行する必要があります。
私がお勧めするのは、最初にすべてのインラインスタイルでメールを作成することです。その後、満足したら、モバイルのサポートを追加できます。
モバイルのサポートを追加するには、メディアクエリをheadタグに追加し、を使用!importantしてインラインスタイルを上書きします。
次に例を示します。 モバイルメールの最適化
これは、どのcssが電子メールクライアントをサポートしているかを詳しく説明した便利なチャートです。 http://www.campaignmonitor.com/css/
それらがそのようにインラインで機能するとは思わないので、おそらくHTMLメールテンプレート自体にスタイルシートを埋め込む必要があります（例<style>@media {...}</style>）。
それでも、頼りになるのは非常に危険なことのようです。標準とCSSのサポートは約10年遅れており、サポートされているプロパティとスタイルの種類に関して、人気のある電子メールクライアント間で大きな違いがあるため、HTMLメールはお尻に大きな苦痛を与えます。
一般に、シンプルに保ち、すべてのインラインCSSで古い学校のテーブルベースのレイアウトを使用するのが最善の方法です。キャンペーンモニターには、主要な電子メールクライアントおよびデバイスのさまざまなCSSプロパティのサポートに関する優れたチャートがあります。
電子メールクライアントでHTMLが正しくレンダリングされない問題の一般的な回避策は、できる限り最善を尽くし、上部に 「電子メールが正しく表示されませんか？ブラウザで表示してください」という目立つリンクを表示することです。
レイ・カーツワイルの毎週のニュースレターの爆発はこれを行います、そしてそれは非常によく形成されていて、よくできています、そして私はいつもそれを読みます。（これは、コンテンツとプレゼンテーションの見事なブレンドです）。
