Question

据我所知，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！重要的标签是坏的，我在这里包含了一个修改过的媒体查询：

<style type="text/css">

    img#banner{display:block;
    }

    @media (max-width: 450px){

    img#banner{display:none;}
    }

</style>

虽然这似乎并没有好转。我认为普遍的共识是媒体查询和电子邮件签名不会混合。

Answer 1

不幸的是，我认为你不能在电子邮件中使用媒体查询。 Here is a link

但是，你仍然可以设法修改你的html和CSS，以覆盖你的图像，以便为每个设备集中它。

缩放背景图像以适合div：

background-size: contain;

缩放背景图片以覆盖整个div：

background-size: cover;

Answer 2

删除针对!important的第一个样式的display:block;规则。两个人正面交锋常常会产生意想不到的结果。

媒体查询电子邮件签名，可能吗？

2 个答案: