我很想知道,因为我看到了很多不同的答案。最终我认为500-600px会好的。特别是如果您要构建匹配Hotmail,Gmail,Outlook,Mail.app等标准
但我想听听别人对此事的意见。是否有适合开发电子邮件通讯的固定尺寸?这是关于使用HTML表格构建模板。
答案 0 :(得分:5)
IMO你不应该设置宽度。我和许多其他人一样,倾向于在手机上查看我的电子邮件。拥有智能手机的用户数量正在增长;那些使用手机查看电子邮件的用户也是如此。
您永远不知道用户的分辨率。如果你想让他们真正阅读你的信息,而不仅仅是删除它,因为它会引起恼人的水平滚动,如果可能的话,最好避免设置宽度。
答案 1 :(得分:-1)
出于查看目的,请将Windows分辨率(或Mac分辨率)更改为尽可能小的分辨率。看看它的样子。虽然,我坚持使用网站基线分辨率,即800x600。我认为这也适用于以HTML格式发送的电子邮件。
如果您希望以HTML格式打印新闻稿(使用物理打印机),我会在页面打印时将不同的样式表用于不同的浏览器,并将媒体属性翻转为“打印”。然后,根据应用样式的时间以及最终用户是将页面打印到物理打印机还是以HTML格式查看,它的外观会有所不同。用不同的浏览器彻底测试。我在不同的浏览器中看到打印预览打印比例变化中的奇怪行为。有时规模不会持久。谷歌浏览器是使打印比例准确的最差的。它们的性能和样式都很好地工作,但在发送到打印机时却很差。在IE 9中,打印比例默认值不会保留。在某些版本的Mozilla中,您需要强制缩放到125%(或者除了100%以外的任何其他值)然后在实际变为100%之前强制为100%。我不会详细介绍,但这段代码将让您开始了解如何使用media属性。打印比例“Shrink To Fit”是你最大的敌人。如果浏览器支持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>