Html 响应电子邮件-媒体查询中心

我有一张桌子，上面有一个标志

<td class="header" style="padding: 10px 20px 0 10px;">
  <table  align="left" border="0" cellpadding="0" cellspacing="0">  
    <tr>
      <td style="padding: 10px 0 0 10px;">
       <img src="images/logo.png" alt="Logo"/>
      </td>
    </tr>
  </table>
  <!--[if (gte mso 9)|(IE)]>
    <table width="335" align="left" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td>
  <![endif]-->
  <table class="col325" align="right" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 325px;padding-top:10px;">  
    <tr>
      <td height="55" bgcolor="#deecf7" style="text-align:center;color:#000;font-weight:bold;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </td>
    </tr>
  </table>
  <!--[if (gte mso 9)|(IE)]>
        </td>
      </tr>
  </table>
  <![endif]-->
</td>

---

正如您所看到的，我有align=left，但我希望在移动版本上的媒体查询中将其居中，如何覆盖align=left？

如果您愿意将此表居中，则可以执行以下操作：

<div align="center">
<table border="0" cellpadding="0" cellspacing="0">  
    <tr>
        <td style="padding: 10px 0 0 10px;">
            <img src="images/logo.png" alt="Logo"/>
        </td>
    </tr>
</table>
</div>

---

由于它将在中间显示您的表，因此对所有设备都有一定的响应。

诀窍是使用父元素并切换图像表的宽度

左对齐：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#DDDDDD">
  <tr>
    <td align="center">

      <table bgcolor="#CCCCCC" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left">
           <img src="images/logo.png" width="100px" height="100px" alt="Logo" style="" style="margin: 0; border: 0; padding: 0; display: block;"/>
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

现在使用媒体查询来更改内部表的宽度。在这里，我只是将其内联以演示：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#DDDDDD">
  <tr>
    <td align="center">

      <table bgcolor="#CCCCCC" width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100px !important;">
        <tr>
          <td align="left">
           <img src="images/logo.png" width="100px" height="100px" alt="Logo" style="margin: 0; border: 0; padding: 0; display: block;"/>
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

---

所以我让它工作，所以我想我会张贴我是如何让它工作的，以防其他人有类似的问题

这就是媒体查询清除我在下面样式中内联的最大宽度的神奇之处

body[yahoo] .logo{max-width:none !important;text-align: center;}

这是标题的整个td

<td class="header" style="padding: 10px 20px 0 10px;">
  <table  align="left" border="0" cellpadding="0" cellspacing="0" class="logo" style="width:100%;max-width:220px;">
    <tr>
      <td style="padding: 10px 0 0 10px;">
       <a href="#"><img src="images/logo.png" alt="Logo"/></a>
      </td>
    </tr>
  </table>
  <!--[if (gte mso 9)|(IE)]>
    <table width="335" align="left" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td>
  <![endif]-->
  <table class="col325" align="right" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 325px;padding-top:10px;">  
    <tr>
      <td height="55" bgcolor="#deecf7" style="text-align:center;color:#000;font-weight:bold;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </td>
    </tr>
  </table>
  <!--[if (gte mso 9)|(IE)]>
        </td>
      </tr>
  </table>
  <![endif]-->
</td>

---

这是行不通的，因为如果我把它从一个div或表中居中，它会把桌面版本居中，它也会把它旁边的表推到下一行。这是一种很好的开箱思考，但在这种情况下，我认为它对我不起作用，我可能应该从上面的HTML更新开始。在一个td中，我有两个相邻的表格作为标题。我这样做是因为当我们进入更小的屏幕尺寸时，这些桌子会变得100%宽，并且彼此堆叠在一起。我可能需要在媒体查询中进行填充或其他操作，嗯……为什么Outlook是有条件的？你不希望它在桌面上查看时显示在Gmail和Yahoo等web客户端上吗？这是一个解决办法，因为他们不支持媒体查询？我偶尔会使用有条件的outlook，Gmail和Yahoo会以160像素的速度完美渲染，但outlook需要150像素。我不知道为什么outlook需要它，但有时它会有帮助，所以我只是习惯于添加它。我希望它在所有的桌面客户端雅虎、Gmail、Hotmail、iCloud，当然还有Outlook 2003-2013中看起来都100%一样，但在iOS和它所使用的Android上，它会有响应性。我正在研究一种类似于你的方法：你让我跳出盒子思考如果我理解正确的话，这是因为在某些观点中，它将宽度设置为100%，加上父填充弹出到下一行，而其他客户将其视为填充内100%的空间。如果删除父容器中的填充，则不需要条件。如果需要边框或bgcolor进行偏移，请填充子对象并嵌套在其中，而不是填充父对象。最大宽度在Outlook“07”、“10”和“13”中不起作用。如果不将其与条件句结合使用，就无法得到一致的结果，从而在上述观点中伪造它。