Question

我已经构建了一个响应式HTML电子邮件，然而，在它遇到媒体查询之前，它在20px分辨率差异之间中断。在600px和620px之间，我不明白为什么。一切都已通过验证器，解析等，并作为验证出来。我认为，因为这个突破的回应导致了YMail和其他一些客户的奇怪了望。有什么想法吗？

的jsfiddle： http://jsfiddle.net/V6GQ9/

@media only screen and (max-width: 600px) {
  a[class="btn"] {
    display: block!important;
    margin-bottom: 10px!important;
    background-image: none!important;
    margin-right: 0!important;
  }
  div[class="column"] {
    width: auto!important;
    float: none!important;
  }
  div[class="column-left"] {
    width: auto!important;
    float: none!important;
  }
  div[class="column-right"] {
    width: auto!important;
    float: none!important;
  }
  }

Answer 1

标记中有两件事导致了问题。

1）具有body-wrap类的表需要设置cellpadding, cellspacing and border属性：

  <table class="body-wrap" border=0 cellpadding=0 cellspacing=0>
  </table>

原因是由于遗留和浏览器特定的默认设置客户端在那里添加了一些像素，这导致内容的区域小于600像素，因此推下右列。

2）当您将媒体查询宽度设置为600px时，它不考虑右内滚动条，它会将几个像素放入内容空间。您会注意到如果消除了底部内容并且没有滚动条，则差异量就会减少。

解决方案是将媒体查询max-width设置为更大的620px或更大的内容，以减少两列所占用的宽度内容。

此外，您还可以在表格中设置border, cellpadding, cellspacing属性，但如果您增加媒体查询max-width以适应它，则不必如此。

欢迎设计电子邮件。它是一个完全不同的蜡球：）

HTML电子邮件以奇数分辨率中断

1 个答案: