问题
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.
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 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;
}
}
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?
回答1:
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 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).
回答2:
Yahoo does indeed ignore your media query wrapper. I have further seen what you are referencing from campaign monitor, email on acid and the fix of using attribute selectors and personally I did not like this method of fixing the problem. So I found an alternate solution. When I code e-mails, I code all of the CSS in-line. When I do responsive emails, again all of my CSS is inline, but then I use media queries ONLY for when I need to alter content for a specific media - show/hide content, change widths etc. So the Yahoo problem became a major nightmare for me. Here is how I got around it and kept all of that confusion of yahoo="fix" out of my emails.
Similar to what is stated and well-documented, responsive emails are imperfect at best. They do not render on many of the Apps (Gmail, Yahoo, etc.) Gmail takes out your completely. Older clients are hit and miss at best. But if your e-mail has absolutely got to be responsive, might as well do the best that you can. So far in my testing, this fix seems to work appropriately. Alternatively, if you are worried about someone with a 1px browser trying to view your email try the opposite, use a media query for 10000px wide min and max. Hope this fix helps some people and clarifies some things. This negates any need to alter the HTML coding in your email at all. Fix the CSS and keep moving.
Yahoo disregards your media query completely, so really all you have to do, is undo anything in your media query like so:
/*---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;
}
}
回答3:
Yahoo! Mail just fixed their CSS parser so attribute selectors are no longer required within media queries (unless you want to use them)
http://freshinbox.com/blog/yahoo-mail-fixes-media-query-bug-yahoo/
来源：https://stackoverflow.com/questions/19575286/responsive-design-in-email-issue-with-attribute-selectors-in-yahoo