@media 나누기 Gmail CSS

MailChimp를 사용하여 맞춤 템플릿을 만들고 있습니다. 아직 여러 이메일 클라이언트에서 테스트 해 보았지만 지금까지 Gmail 테스트를 통해이 미디어 쿼리를 추가하면 작동하지 않을뿐만 아니라 전체 HTML 이메일이 CSS없이 렌더링됩니다. 다른 CSS는 쿼리없이 gmail에서 잘 작동합니다. 다른 클라이언트에서는 미디어 쿼리가 작동하고 다른 CSS가 작동하지 않습니다.@media 나누기 Gmail CSS

gmail (및 기타)의 알려진 문제입니까? 아니면이를 수행 할 수있는 방법이 있습니까?

@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; 
     } 
    }

출처

2012-07-27 MaxPowers

Gmail은 <head> 또는 <body> 중 하나에 <style>를 지원하지 않습니다. 미디어 쿼리는 인라인이 아닌 내장되어 있기 때문에 Gmail에서 활용할 수 없습니다. 캠페인 모니터의 this handy chart에서 다양한 클라이언트와 앱에서 지원되는 스타일과 선택기에 대해 자세히 알아보십시오.

출처

2012-07-28 00:55:38

저는 Gmail에서 똑같은 문제가있었습니다. 필자의 경우 이메일 뉴스 레터에 HTML을 작성했습니다. 문제는 (미디어 쿼리가있는 HEAD 섹션을 포함하여) 전체 HTML을 축소하는 것이 었습니다. 이는 분명히 어떻게 든 CSS 구문을 분해하여 @media 쿼리에 포함 된 CSS 클래스를 부분적으로 해석하도록 Gmail을 만드는 것입니다. 이것이 당신의 경우라면, 두 가지 작업을 수행 할 수 있습니다

는 HEAD 섹션를 작게를하지 않습니다 (내가 무슨 짓을했는지). 그것을 그대로두고 미디어 쿼리를 거기에 넣으십시오.

다른 minifier을 시도하고 축소 된 미디어 쿼리를 통해 아무 것도 손상되지 않았는지 확인하십시오. 당신은 이메일 뉴스 레터를 작성하는 경우 어떤 경우

, 당신은, 즉 할 수있는 당신 인라인 많은 CSS 스타일이 있는지 확인하십시오 "스타일"로 태그에 직접 스타일을 추가하는 대신 속성 CSS 클래스 사용하기.

출처

2013-10-11 12:06:18

@media 나누기 Gmail CSS

답변

관련 문제