Outlook 365、电子邮件等中的响应式 HTML 文本/图像答案

【问题标题】：Responsive HTML text/images in Outlook365, gmail, etcOutlook 365、电子邮件等中的响应式 HTML 文本/图像
【发布时间】：2022-04-23 03:40:51
【问题描述】：

我有一个 PowerShell 脚本，它创建一个 HTML 文件 email.html，其中包含内联 CSS 和嵌入式 base64 图像。然后每天将其发送给我（我的网站报告）。

我希望电子邮件正文中的所有（文本/图像）根据电子邮件客户端可视区域的宽度自动调整大小。诚然，我在 HTML/CSS 方面的经验有限。在下面的示例中我做错了什么？注意：我在下面的示例中截断了 base64 文本，因此在我的示例中它不会占用太多空间。

代码：

<!doctype html>
<html>

<head>
<style type="text/css">
    @media screen and (max-device-width:640px),
    screen and (max-width:640px) {
        .responsivetext {font-size: 2vw !important;width:auto;height:auto;vertical-align:middle}
    }
</style>

</head>

<body>
    <td style="font-family: Arial;" class="responsivetext">I have tried everything.  Why wont this text resize when resizing Outlook 2016?</td>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAIEAIAAADwyk6cAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0T...." />
</body>

</html>

【问题讨论】：

我觉得你可以用table
请注意，我们更喜欢这里的技术写作风格。我们轻轻地劝阻问候，希望你能帮助，谢谢，提前感谢，感谢信，问候，亲切的问候，签名，请你能帮助，聊天材料和缩写 txtspk，恳求，你多久了被卡住、投票建议、元评论等。只需解释您的问题，并展示您尝试过的内容、预期的内容以及实际发生的情况。

标签： html css outlook responsive

【解决方案1】：

我也一直在处理这种情况。在所有选项中都很难取得成功。

不幸的是，Outlook 对媒体查询并没有任何可靠的支持，并且在涉及移动响应电子邮件时经常被“排除在外”。 Can media queries be used in Outlook

我建议你here你可以创建响应式html设计并检查它。

【讨论】：

谢谢。我知道 Outlook 的桌面版本对媒体查询的支持不是很好。我仍然希望有一种方法至少可以在有限的支持下完成工作。
@MKANET 内容呢？它是动态的还是静态的？我的意思是，如果内容类似于重置密码或确认码，那么这很容易。如果内容像报纸一样复杂。你必须投入大量时间。您可以在我提到的网站上看到 html 和 css 标准。您可以使用一些特殊的断点标签。据我记得 flex 属性不支持。您可以使用表格开始测试。您可以为 th 和 td 标签指定宽度的百分比。
这是一个基于nginx.log的IP访问我的网站的每日报告。输出总是相同的格式。如果有任何方法可以做到这一点，我想知道一个有效的 html 示例。
格式并不复杂。我真的希望有人能根据我的问题中的示例 html 给我一个工作示例。我可以弄清楚其余的。如果您可以使用我发布的示例发布一个工作示例，我将不胜感激。
@MKANET：以下是有用的建议。你的问题似乎总是在寻找例子。这在一定程度上是可以的，但我担心您将 Stack Overflow 用作获得免费工作的一种方式，而不是获得自我实现和实验工程师所要求的有用指导和指导。