2

HTML 電子メールのメディア クエリが広くサポートされていないことは理解していますが、HTML 電子メールの署名はどうですか? 私はこのコードを使ってみました:

<style type="text/css">

    img#banner{display:block !important;
    }

    @media (max-width: 450px){

    img#banner{display:none !important;}
    }

</style>

署名のコンテンツを含む開始テーブル タグの直前に配置すると、ブラウザーでは機能しますが、電子メール クライアントでは機能しないようです。何か間違ったことをしている可能性がありますか、それともまったくサポートされていない可能性がありますか? わからない？しかし、それがサポートされていれば、たとえ少数の電子メール クライアントでしかサポートされていなくても、使用する価値があります。

編集: バナーの幅を 100% に設定しました。バナーのグラフィックが広すぎて、モバイル デバイスでは見栄えが悪いため、まったく表示しないようにするという考えです。

<a class="link" href="http://www.website.com/">
    <img id="banner" style="width:100%;" alt="#" src="banner.gif">
</a>

編集 2: 2 つの !important タグが不適切だったようです。修正したメディア クエリをここに含めました。

<style type="text/css">

    img#banner{display:block;
    }

    @media (max-width: 450px){

    img#banner{display:none;}
    }

</style>

実際にはこれはうまくいかないようです。一般的なコンセンサスは、メディア クエリと電子メールの署名は混在しないということだと思います。

4

2 に答える 2

2

残念ながら、メールではメディア クエリを使用できないと思います。 ここにリンクがあります

ただし、すべてのデバイスの中央に配置するために、html と CSS を変更して画像を覆うことができます。

div 内に収まるように背景画像をスケーリングするには:

background-size: contain;

背景画像をスケーリングして div 全体をカバーするには:

background-size: cover;
于 2013-10-22T09:24:27.210 に答える
1

!importantの最初のスタイルでそのルールを削除しますdisplay:block;。2 人が直接対決すると、予期しない結果が生じることがよくあります。

于 2013-10-22T18:50:46.120 に答える