【发布时间】：2014-12-16 21:57:24
【问题描述】：
我正在尝试将我公司的电子邮件设置为更适合移动设备。不幸的是，因为这是基于电子邮件的，我必须像 1999 年那样构建它们：主要是表格和图像切片。
我有设置为特定宽度的表格，没有定义高度。每张表不超过一行，通常为 2-3 列。每个表格单元格一张图片。目前，我没有定义表格单元格或图像的尺寸。
这是我正在处理的新响应代码：
@media (max-width: 670px) {
body {
background-color: red !important; /* for testing */
}
table {
width: 100% !important;
height: auto !important;
}
table img {
width: 100% !important;
height: auto !important;
}
}
@media (max-width: 480px) {
body {
background-color: blue !important; /* for testing */
}
}
http://codepen.io/BevansDesign/pen/CnAfB
正如你在我的 Codepen 页面上看到的，如果你缩小窗口的宽度，图形会相应地缩小。然而在 Chrome 中，由于基于像素的缩放有点奇怪，我在图像（绿线）之间得到了很多间隙。 （在 FF 中运行良好，当然在 IE8 中根本无法运行，我还没有在其他任何东西上测试过。）
有谁知道我怎样才能消除这些差距？我尝试将图像高度设置为 100%，但这只会使图像保持原始高度并水平挤压它们。
我知道我可以通过手动设置所有维度来解决此问题，但我正在寻找一种调整尽可能少的解决方案，因为我每周会发送 2-3 次这些电子邮件。
感谢您的帮助！
【问题讨论】：
标签： html css email responsive-design