@media Breaks Gmail CSS

问题

I am making custom template with MailChimp. I have yet to test it across several email clients, but so far my tests with gmail reveal that when I add this media query, not only does it not work, but it causes the entire html email to render without css. The other CSS works fine for gmail without the query. On other clients the media query works, and does not prevent the other CSS from working.

Is this a known issue with gmail (and others), or is there a way to accomplish this?

    @media only screen 
    and (max-device-width : 480px) {
       .bodyContent div{
            font-size:24px;
        }
        h1, .h1{
            font-size:36px;
        } 
        h2, .h2{
            font-size:28px;
        }
        h4, .h4{
            font-size:28px;
        }
        .preheaderContent div{
            font-size:24px;
        } 
    }

回答1:

Gmail doesn't support <style> in either <head> or <body>. Since media queries are embedded rather than inline, they can't be utilized in Gmail. Check out this handy chart from Campaign Monitor which details which styles and selectors are supported across various clients and apps.

回答2:

I had the exact same problem with Gmail. In my case, I wrote a HTML for an email newsletter. The problem was that I was minifying the whole HTML (including the HEAD section where the media queries were), which apparently broke apart the CSS syntax somehow, making Gmail to partially interpret css classes contained within the @media query. If this is your case, you can do two things:

Don't minify the HEAD section (what I did). Leave it untouched and put your media queries there.
Try different minifiers and go through the minified media queries to make sure nothing got broken.

In any case, if you are creating an email newsletter, make sure that you inline as much CSS styles as you can, i.e.: add your styles directly to your tags with the "style" attribute instead of using CSS classes.

来源：https://stackoverflow.com/questions/11695854/media-breaks-gmail-css

标签

html

gmail

mailchimp