电子邮件中的响应图像

Responsive images in email

我想在电子邮件中为移动设备提供一个图像,为桌面设备提供不同的图像。 display: none 适用于除 Outlook 和 Gmail 之外的所有内容。图像上有一个按钮,但在移动设备上,按钮中的文本太小了。有任何想法吗?

我最后做了什么:

<head>
<style type="text/css">
    @media only screen and (max-width: 480px){
       img {content: url(http://images4.fanpop.com/image/photos/17000000/Nature-s-jewerly-love-you-natures-seasons-17036569-500-500.jpg)}
    }
</style>
<body>
    <img img src="http://data.whicdn.com/images/28179582/Nature-Photography-Rain-520x520_large.jpg" width="500" height="500">
</body>

iPhone 和 Android 可以处理 content,对我来说这是我唯一需要担心的移动设备。它们提供我想要的图像,而其他桌面设备保留原始图像。

很高兴看到您找到了适合您的解决方案。如果您或其他任何人将来需要 display: none 用于邮件客户端:对于 Outlook,它是 mso-hide: all,而 Gmail 应该使用 display: none,只要它处于内联样式属性中,或者 [=13] =]