Question

我正在尝试根据观看者使用的屏幕尺寸在电子邮件中加载两个不同的图像。

我有一个WordPress忍者表格感谢您发送电子邮件，我希望发送出身体中显示的图像。如果屏幕尺寸小于501px我希望图像显示小于500px我想要显示不同的图像。不同之处在于文本较少，在移动设备上更容易阅读。

我尝试过媒体查询，但它们不适用于电子邮件格式化。我在测试html页面上使用它们以确保我的代码工作正常，所以也许媒体查询不能用于电子邮件？

是否有另一种方法可以根据查看电子邮件的屏幕大小来更改图像？

这是我的代码：

HTML

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class='ourStory'>
    <img src='http://www.TheBetterSoftwareCompany.com/wp-
content/uploads/2015/04/ourstory-TBSC-edit3-mobile-copy.jpg' />
    </div>
</body>
</html>

CSS

@media all and (min-width: 501px) {
    div.ourStory{
     content:url('http://www.TheBetterSoftwareCompany.com/wp-
content/uploads/2015/04/ourstory-TBSC-edit3-copy.jpg');
    }
}

Answer 1

使用<div>您需要使用<table>

，无法正常实现响应式电子邮件，甚至根本无法实现

https://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/

像mailchimp这样的服务知道这些并且有自己的内置工具来设计电子邮件。

http://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/

我建议您使用此类库来为您的电子邮件实现更好的响应式设计。

http://zurb.com/ink/docs.php

示例代码：

<table class="container">
  <tr>
    <td>

      <table class="row">
        <tr>
          <td class="wrapper">

            <table class="eight columns">
              <tr>
                <td>

                  Eight Columns

                </td>
                <td class="expander"></td>
              </tr>
            </table>

          </td>
          <td class="wrapper last">

            <table class="four columns">
              <tr>
                <td>

                  Four Columns

                </td>
                <td class="expander"></td>
              </tr>
            </table>

          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

此外，许多电子邮件提供商和客户端都不支持链接的CSS，因此您必须依赖内联工具，这些工具会将 style =＆＃34;＆＃34; 属性应用于HTML元素。

根据所用设备的屏幕尺寸在电子邮件中加载图像

1 个答案: