在电子邮件响应式设计 - 问题与雅虎属性选择(Responsive Design in Email

我试图创建一个响应电子邮件模板发送给我公司的用户。我们的列表包含各种如Gmail / Yahoo等互联网服务供应商的用户，我们有响应式设计在大多数情况下工作，但我们正在与雅虎有问题。

问题是，在雅虎，它忽略了媒体查询CSS和包装上使用桌面版的响应CSS。在下面的例子@media only screen and (max-width: 580px)被忽略，我们的电子邮件显示用的320像素桌面上的宽度。

 @media only screen and (max-width: 580px) {
     .container {
        width: 320px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
     }
  }

电子邮件酸性和运动监视器都推荐使用CSS属性选择器来解决这个问题，但我们发现，导致在与雅虎的应用程序，以显示与全宽布局手机灵活的移动布局（它不是响应）。

@media only screen and (max-width: 580px) {
   body[yahoo] .container {
       width: 320px !important;
       margin: 0 !important;
       padding: 0 !important;
       overflow: hidden !important;
   }
}

有没有人找到一个解决方案，所以我们并不需要使用属性选择在我们的CSS，并与桌面上的全宽度的布局与雅虎电子邮件显示？

Answer 1:

电子邮件是百分比的游戏 - 我想你可能不得不削减在这一个你的损失。媒体查询不完全反正支持，所以你永远不会得到100％的客户支持。

恕我直言，流体布局带动电子邮件布局（你仍然可以增强或每个客户端调整与媒体查询分段输入）更好的100％支持的替代品。

Answer 2:

雅虎确实忽略你的媒体查询包装。我看得更远的话，你是从运动监视器，对酸电子邮件和使用属性选择的修复引用什么，我个人不喜欢解决问题的这种方法。所以，我发现了一个替代的解决方案。当我的代码的电子邮件，我代码的所有在线的CSS。当我做响应的邮件，再次我所有的CSS的是内联的，但后来我用媒体的查询只对当我需要改变特定媒体内容 - 显示/隐藏内容，变化幅度等，所以雅虎的问题成为一大梦魇为了我。这是我如何得到它周围，并保持所有雅虎=“修复”的那个混乱了我的电子邮件。

什么是明确和详细记录相似，响应电子邮件是不完美的最好的。他们没有很多的应用程序（如Gmail，Yahoo等）的渲染的Gmail拿出你的全部。旧客户端被击中，并在最好的怀念。但如果你的电子邮件已经完全得到了响应，还不如做最好的，你可以。所以，在我的测试到目前为止，这似乎修复适当工作。另外，如果你担心有人用1px的浏览器尝试查看电子邮件尝试相反，使用10000px广泛的最小值和最大值的媒体查询。希望这有助于修复某些人并澄清一些事情。这否定了任何需要改变在电子邮件中的HTML代码在所有。修正CSS和继续前进。

雅虎完全忽视你的媒体查询，所以真的所有你需要做的，就是撤消在媒体查询任何像这样：

/*---Here is my media query that shows and hides some content for mobile---*/

@media only screen and (max-width: 480px) {
.header1 {width:10%}
.tdlogo {width:80%;}
.logo {margin: 0 auto;}
.expand80 {width:80% !important;}
img.show {width:100% !important;}
.show {
display:block !important;
max-height:none !important;
overflow:visible !important;
}
.hide {
display:none !important;
width:0% !important;
max-width:0px !important;
}
}

/*---This media query undoes my original media query, and will never be used by anything except for yahoo since it is ignoring my media query to begin with---*/


@media only screen and (min-width: 1px) and (max-width: 1px) {
.header1 {width:5%}
.tdlogo {width:25%;}
.logo {margin: 0 auto;}
img.show {width:0px !important;}
.expand80 {width:60% !important;}
.show {
display:none !important;
max-height:0px !important;
overflow:hidden !important;
}
.hide {
display:block !important;
width:20% !important;
max-width:none !important;
}
}