在电子邮件中的响应设计 - 问题与属性选择器在雅虎 [英] Responsive Design in Email - Issue with attribute selectors in Yahoo

问题描述

我正在尝试创建一个响应式电子邮件模板，以发送给我公司的用户。我们的列表包含来自各种ISP（如Gmail / Yahoo等）的用户。我们的响应式设计在大多数情况下都可以正常工作，但我们在雅虎有问题。

I'm trying to create a responsive email template to send to my company's users. Our list contains users from all sorts of ISPs like Gmail/Yahoo, etc. We have the responsive design working in most instances but we are having issues with Yahoo.

是在雅虎，它忽略媒体查询css包装和使用响应css的桌面版本。在下面的示例 @media only屏幕和（max-width：580px）被忽略，我们的电子邮件在桌面上显示宽度为320px。

The issue is that in Yahoo, it ignores the media query css wrapper and uses the responsive css on the desktop version. In the below example @media only screen and (max-width: 580px) gets ignored and our email displays with a width of 320px on desktop.

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

Email On Acid 和广告系列监控都建议使用CSS属性选择器来解决问题，但我们发现，导致手机上的响应移动布局雅虎应用程序以全宽布局显示（它不响应）。

Email On Acid and Campaign Monitor both recommended using CSS attribute selectors to fix the problem, but we find that that causes the responsive mobile layout on phones with Yahoo apps to display with the full width layout (it's not responsive).

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

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

Has anyone found a solution so we don't need to use attribute selectors in our CSS and have the email display with the full-width layout on desktop with Yahoo?

推荐答案

电子邮件是一个百分比的游戏 - 我想你可能需要减少你的损失。媒体查询并不完全受支持，因此您永远不会获得100％的客户端支持。

Email is a game of percentages - I think you might have to cut your losses on this one. Media queries are not fully supported anyway, so you were never going to get 100% client support.

IMHO流体布局是更好的100％支持的替代驱动电子邮件布局（您仍然可以增强或调整每个客户端与分段输入的媒体查询）。

IMHO fluid layouts are a better 100% supported alternative to drive the email layout (which you can still enhance or tweak per client with the segmented input of media queries).

这篇关于在电子邮件中的响应设计 - 问题与属性选择器在雅虎的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！