电子邮件中的响应图像
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] =]
我想在电子邮件中为移动设备提供一个图像,为桌面设备提供不同的图像。 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] =]