html - 为什么 `max-width` 比 `min-width` 对于响应式电子邮件设计更好？

Question

反对响应式电子邮件设计的一个论据是媒体查询在各种电子邮件环境中通常(仍然!)得不到很好的支持。在这些环境中，将呈现电子邮件的“桌面”版本而不是“移动”版本。

“有问题”的环境往往是移动环境——也就是说，大多数桌面环境似乎都对媒体查询有很好的支持。

鉴于这一事实，创建响应式电子邮件的最佳方法似乎是采用“移动优先”方法。也就是说，为移动环境设计“默认”电子邮件布局。然后可以使用媒体查询(即利用 min-width)为桌面重新格式化电子邮件。

最终结果是，即使是不支持媒体查询的移动环境也会呈现适合移动设备的电子邮件，而功能更全的桌面客户端会呈现桌面版本。

问题是，我看到的大多数响应式电子邮件继续使用 max-width 而不是 min-width，这与我的预期相反。

对于响应式电子邮件设计，是否有特定原因故意使用 max-width 而不是 min-width？

Answer 1

通常，max-width 用于设计具有桌面大小设计的电子邮件。最小宽度将用于设计移动优先。您正在查看的电子邮件可能在设计时考虑了桌面大小的屏幕，或者考虑了大量的媒体查询。

使用最大宽度有几个原因。

• 对于专业开发人员来说，他们可能从现有的网站或模板中继承了旧的 CSS，但他们没有权限或无法更改。

• 电子邮件或网站可能更重要，因为它可以在更大的屏幕上很好地呈现并包含更多信息。这可能是由于受众完全或主要在桌面上操作，或者是由于客户要求开发人员提供非常确定的设计师。

• 旧的电子邮件模板可能是在桌面主导领域的时代设计的。仅仅几年前，智能手机和更小的屏幕才成为常态，而旧的电子邮件可能还没有适应这一点。

但是，根据我的经验，如果我可以暂时采取更自以为是的答案，我更喜欢在我的响应式电子邮件设计中使用最大宽度。我的大脑可以理解使用 max-width 作为截止点比使用 min-width 作为起点更好。所以这可能只是某些人的个人喜好。