デスクトップの電子メールクライアントにのみ影響し、モバイルクライアントには影響しないCSSを含めようとしています。
以下の例では、すべてのクライアントにCSSを含め、最大幅480pxのメディアクエリを使用するモバイルクライアントのみを対象としたCSS宣言でそれをオーバーライドしようとしました。
私も使用してみまし@media screen and (min-width: 800px)
たが、テストしているすべての電子メールクライアントで無視されているようです。
ただし、Litmusで電子メールをテストすると、デスクトップベースのクライアントも含め、すべての電子メールクライアントが500pxではなく100%の幅でテーブルを表示しています。
table[id="socialTbl"] {
width: 500px !important;
max-width: 500px !important;
}
table[id="locations"] {
width: 500px !important;
max-width: 500px !important;
}
/* Desktops and laptops ----------- */
@media only screen
and (max-width : 480px) {
/* Styles */
table[id="socialTbl"] {
width: 100% !important;
max-width: 100% !important;
}
table[id="locations"] {
width: 100% !important;
max-width: 100% !important;
}
}