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;。两个人并肩作战往往会产生意想不到的结果。

于 2013-10-22T18:50:46.120 回答