2016-11-18 7 views
0

475ピクセル幅で幅広くなったり狭くなったりする応答性のある(左/右)パディングがあるhtml電子メールデザインがあります。私はより狭い幅のインライン属性を設定し、応答性のためのメディアのタグを追加しました:WindowsのOutlook用電子メールの応答性のある埋め込み

@media only screen and (min-width: 476px) 
{ 
    *[class~="iphone_pad"] {padding:0 40px;} 
} 
@media only screen and (max-width: 475px) 
{ 
    *[class~="iphone_pad"] {padding:0 25px;} 
} 

これはOSX上のApple MailやOutlookの動作し、デフォルトではほとんどの主要な狭い画面で、狭いパディングであるため、 。しかし、Windows上のOutlookは、より広い埋め込みで応答しません。それは、Outlook/Windows doesn't support the media tagである可能性がありますか?

誰もがこれを動作させる方法を知っていますか?

答えて

1

電子メールの本文にインラインCSSがある場合は、<style>タグの各CSSルールの末尾に!importantを追加して、インラインCSSを無効にする必要があります。

しかし...

WindowsのOutlookが<style>タグが、ない@mediaタグをサポートしています。私は通常、Outlookで最初に動作する電子メールを作成し、Windows Outlookが認識できないタグ(@mediaなど)を使用して他のクライアントのレイアウトをハッキング/徐々に強化します。

+0

興味深い。だから、私はOutlookを含むワイドスクリーンに、より広いパディングをインライン展開することを提案しています。問題は、すべての狭い画面が動作するかどうかです。幅の広い埋め込みは、狭い画面ではより厄介です。 – dhc

+0

一言...そうです、それは私の行いです。狭いデザインを望むすべてのクライアントはメディアクエリーをサポートしているので、広いパディングを無効にすることができます。 このルートが気に入らない場合は、MSOのゴーストテーブルにある電子メールの各セクションをラップすることができます。基本的には、Outlook専用のルールセット全体が作成されます。 https://www.emailonacid.com/blog/article/email-development/using-ghost-columns-to-fix-alignment-problems-in-outlook。しかし、これはかなり面倒なことがありますが、それはオプションです。 –

+0

はい、私はMSOの代替案を見てきましたが、好きではありません...あなたに知らせる... – dhc

関連する問題