HTML电子邮件中的CSS类和@media规则

Question

I have a content table(Scores table of my users) that is sent out automatically via email each in every predetermined period of time.

The html used to have static table sizes and other measurements definitions in pixels, instead of in percents.

everything seemed fine on my iPhone, and also on chrome web browser, but went totally out of proportion on Android devices.

I decided to convert in to a responsive layout, replacing those with percents. This seems to have solved my problem, but now, due to the width difference between PC and mobile devices width \\ height ratio, I need to determine a different width for the scores table to a PC screen, and a mobile \\ tablet screen.

I know that this can be done by using the @media rule, but the problem is that this feature of CSS can only be used within a style sheet, and not in an inline formatted CSS(within HTML). And as you probably know, most email clients don't allow CSS style sheets(classes, CSS selectors) within HTML emails.

What would you advice to do in such a situation?.

Any assistance is much appreciated.

Answer 1

most email clients don't allow CSS style sheets(classes, CSS selectors) within HTML emails

Not linked style sheets, but they allow you to place styles within style tags in the head . Yes, some email clients strip out those styles, but that's no reason not to use them. Plenty of email clients also support @media rules these days. There is a lot of good advice about what is and isn't supported in the various email clients here . (That site also has a ton of well tested and nice looking email templates.)

Because some email clients don't support styles in the head of the document, the safest approach is to add inline styles. However, this should't stop you from placing styles in the head section—such as @media rules—for those clients that can handle them.

Answer 2

Just to add on to what ralph said...

As of last year Gmail became the most popular email client, and they strip the entire section out of an email. So it's extremely important to use inline.

this is a pretty good resource for when you are targeting different email clients http://www.campaignmonitor.com/css/

these are some helpful hacks i include in every head-style section

<style>
/* Force Outlook to provide a "view in browser" button. */
body{ width:100% !important; height:100% !important; margin:0; padding:0; background-color: #f8f3eb;}
.ReadMsgBody{width:100%;} 
.ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
/* Reset Styles */
body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} /* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
</style>