响应式HTML电子邮件图像切换

时间:2014-08-14 14:50:09

标签: html email responsive-design gmail

我正在尝试找出一种替换HTML电子邮件上的图像的方法,具体取决于它所查看的设备(桌面或移动设备)。

以下代码适用于iphone等设备,但由于Gmail不支持媒体查询,据我所知,雅虎也不支持,因此也许我应该寻找其他解决方案。有没有人对使用适用于所有设备和电子邮件客户端的方法的类似问题有任何经验?

  <html>
  <head>
    <style type="text/css">
       @media screen and (min-width: 0px) and (max-width: 480px) {
        img[class="swap"] {
        content:url("http://images4.fanpop.com/image/photos/17000000/Nature-s-jewerly-love-you-natures-seasons-17036569-500-500.jpg") !important;}
       } 
    </style>
</head>

 <body>
 < img src="http://data.whicdn.com/images/28179582/Nature-Photography-Rain-520x520_large.jpg"     width="500" height="500" border="0" class="swap" />
  </body>
 </html>  

0 个答案:

没有答案