0

MailChimp でカスタム テンプレートを作成しています。まだいくつかの電子メール クライアントでテストしていませんが、これまで gmail でテストした結果、このメディア クエリを追加すると機能しないだけでなく、html 電子メール全体が css なしでレンダリングされることがわかりました。他の CSS は、クエリなしで gmail に対して正常に機能します。他のクライアントでは、メディア クエリは機能し、他の CSS の機能を妨げることはありません。

これは gmail (およびその他) の既知の問題ですか、それともこれを達成する方法はありますか?

    @media only screen 
    and (max-device-width : 480px) {
       .bodyContent div{
            font-size:24px;
        }
        h1, .h1{
            font-size:36px;
        } 
        h2, .h2{
            font-size:28px;
        }
        h4, .h4{
            font-size:28px;
        }
        .preheaderContent div{
            font-size:24px;
        } 
    }
4

2 に答える 2

4

<style>Gmail は、<head>またはでサポートされていません<body>。メディア クエリはインラインではなく埋め込まれているため、Gmail では使用できません。さまざまなクライアントとアプリでサポートされているスタイルとセレクターの詳細については、Campaign Monitor のこの便利なチャートをご覧ください。

于 2012-07-28T00:55:38.333 に答える
0

Gmailでもまったく同じ問題がありました。私の場合、メール ニュースレターの HTML を作成しました。問題は、HTML 全体(メディア クエリが存在する HEAD セクションを含む) を縮小していたことです。これにより、明らかに CSS 構文が分解され、Gmail が @media クエリ内に含まれる css クラスを部分的に解釈するようになりました。この場合、次の 2 つのことを行うことができます。

  1. HEAD セクションを縮小しないでください(私が行ったこと)。そのままにして、そこにメディア クエリを配置します。

  2. さまざまなミニファイヤを試し、縮小されたメディア クエリを調べて、何も壊れていないことを確認します。

いずれにせよ、メール ニュースレターを作成する場合は、できるだけ多くの CSS スタイルをインライン化するようにしてください。つまり、CSS クラスを使用する代わりに、「style」属性を使用してスタイルをタグに直接追加します。

于 2013-10-11T12:06:18.910 に答える