当前位置：文江博客话题详情

HTML 电子邮件新闻通讯应使用的最大宽度是多少？

发布于 2024-11-29 08:37:54 字数 161 浏览 2 评论 0原文

我很想知道，因为我看到了很多不同的答案。最终我认为 500-600px 就可以了。特别是如果您正在构建符合 Hotmail、Gmail、Outlook、Mail.app 等标准的版本。

但我想听听其他人对此事的看法。是否有适合开发电子邮件通讯的固定尺寸？这是关于使用 HTML 表格构建模板。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦中的蝴蝶 2024-12-06 08:37:54

IMO 你不应该设置宽度。和许多其他人一样，我倾向于在手机上查看电子邮件。拥有智能手机的用户数量正在增长；使用手机查看电子邮件的用户数量也是如此。

您永远不知道用户使用的分辨率是什么。如果您希望他们实际读取您的信息，而不只是删除它，因为它会导致烦人的水平滚动，那么如果可能的话，最好避免设置宽度。

回复收藏 0 原文

你的呼吸 2024-12-06 08:37:54

出于查看目的，请将 Windows 分辨率（或 Mac 分辨率）更改为尽可能最小的分辨率。看看它是什么样子的。尽管如此，我还是坚持使用网站基线分辨率，即 800x600。我认为这也适用于以 HTML 格式发送的电子邮件。

如果您想让您的新闻稿可以 HTML 格式打印（到物理打印机），我会在打印页面时为不同的浏览器使用不同的样式表，并将媒体属性翻转为“打印”。然后，根据应用样式的时间以及最终用户是将页面打印到物理打印机还是以 HTML 格式查看，它的外观会有所不同。使用不同的浏览器进行彻底测试。我在不同浏览器中的打印预览打印比例变化中看到了奇怪的行为。有时规模不会持续存在。谷歌浏览器在打印比例准确度方面最差。它们的性能和样式一致，但在发送到打印机方面表现不佳。在 IE 9 中，打印比例默认值不会保留。在 Mozilla 的某些版本中，您需要将比例强制设置为 125%（或实际上不是 100% 的任何值），然后再强制设置为 100%，然后才能真正变为 100%。我不会详细介绍，但这段代码将帮助您开始了解如何使用媒体属性。打印比例“缩小以适合”是您最大的敌人。如果浏览器支持 CSS3，那么您就有更多选择，并且可以更好地控制新闻通讯的打印方式！

示例：

<style type="text/css" media="all">
    .printPage { height:100%; width:100%; position:relative; }
</style>

<style type="text/css" media="print"> 
    .printPage { height:8.5in; width:100%; position:relative; }
</style>

如果您想在页面中添加页眉/页脚，这里有一个很好的代码片段：

<html>
<head>


<style type="text/css" media="all">
thead { display: table-header-group; vertical-align:top; }
tfoot { display: table-footer-group; vertical-align:bottom; }
.printPage { height:11.5in; }
</style>

<style type="text/css" media="print">
.printHeader { display: table-header-group; vertical-align:top; }
.printFooter { display: table-footer-group; vertical-align:bottom; }
.printPage { height:100%; }
</style>

</head>
<body>
<table class="printPage">
   <thead class="printHeader"><tr><td>Your header goes here</td></tr></thead>
   <tbody>
     <tr><td>
     Page body in here -- as long as it needs to be
     </td></tr>
   </tbody>
   <tfoot class="printFooter"><tr><td>Your footer goes here</td></tr></tfoot>
</table>
</body>
</html>

For viewing purposes, change your Windows resolution (or Mac resolution) to the smallest possible. And see what it looks like. Although, I'd stick with the website baseline resolution, which is 800x600. I would assume this would also apply to email sent in an HTML format.

If you are wanting to make your newsletter printable (to a physical printer) in HTML, I would use different style sheets for different browsers when the page prints and flip the media attribute to "print". Then it will look differently depending on when the style is applied and whether the end-user is printing the page to a physical printer or viewing it in HTML. Test thoroughly with different browsers. I've seen strange behaviors in the Print Preview print scale change in different browsers. Sometimes the scale doesn't persist. Google Chrome is the worst for making the print scale accurate. They are good for performance and styles working consistently, but are poor when it comes to sending to printers. In IE 9, the print scale default doesn't persist. In some versions of Mozilla, you need to force the scale to 125% (or anything other than 100% really) then to 100% before it actually becomes 100%. I won't get into details, but this snippet of code will get you started on how to use the media attribute. The print scale "Shrink To Fit" is your worst enemy. If the browser supports CSS3, then you have more options and can better control how your newsletter prints!

Example:

<style type="text/css" media="all">
    .printPage { height:100%; width:100%; position:relative; }
</style>

<style type="text/css" media="print"> 
    .printPage { height:8.5in; width:100%; position:relative; }
</style>

Here's a good code snippet if you want headers/footers in your page:

<html>
<head>


<style type="text/css" media="all">
thead { display: table-header-group; vertical-align:top; }
tfoot { display: table-footer-group; vertical-align:bottom; }
.printPage { height:11.5in; }
</style>

<style type="text/css" media="print">
.printHeader { display: table-header-group; vertical-align:top; }
.printFooter { display: table-footer-group; vertical-align:bottom; }
.printPage { height:100%; }
</style>

</head>
<body>
<table class="printPage">
   <thead class="printHeader"><tr><td>Your header goes here</td></tr></thead>
   <tbody>
     <tr><td>
     Page body in here -- as long as it needs to be
     </td></tr>
   </tbody>
   <tfoot class="printFooter"><tr><td>Your footer goes here</td></tr></tfoot>
</table>
</body>
</html>

回复收藏 0 原文

~没有更多了~