Html 전자 메일 - 우선 순위 설정

Question

<table width="100%;"> 
     <tr> 
     <td> <!--Right Space (Variable Width)--> </td> 
     <td> <!--content (Width Set - High Priority)--> </td> 
     <td> <!--Left Space (Variable Width --> </td> 
     </tr> 
    </table> 

화면 크기에 따라 여백이 다른 전자 메일을 코딩하는 데 문제가 있습니다. 그것은 미디어 쿼리와 함께 잘 작동하지만 그들을 지원하지 않는 이메일 클라이언트가 있다는 것을 깨달았습니다. 또한 너비 비율을 사용해 보았지만 모바일 크기의 화면에서는 약 90 %, 큰 화면에서는 약 50 %의 콘텐츠를 원했습니다. 테이블과 빈 테이블 셀을 사용하여 마진을 만들고 인라인 스타일링 만 사용할 수 있습니다.

CSS 속성을 설정하는 방법이 있는지 알고 싶습니다. 화면 너비가 줄어들면 콘텐츠 셀의 크기가 가장 높고 왼쪽 및 오른쪽 여백이 너비가 줄어 지도록합니다. .

Answer 1

이것은 최대 너비의 사용 사례와 비슷합니다. 요소의 기본 너비를 90 %로 설정할 수 있지만 전체 바탕 화면 표시 너비의 절반 인 최대 너비를 정의하십시오. 또한이 속성에 대한 Outlook의 지원 부족으로 인해 MSO 조건부를 포함해야합니다. CSS (for HTML email) reference guide

은 아래를 참조하십시오 :

<!--[if (gte mso 9) | (IE)]><table align="center" width="640"><tr><td align="center"><![endif]--> 
<table align="center" width="100%" style="max-width:640px;"> 
<tr> 
<td align="center"> 
    <!--[if (gte mso 9) | (IE)]><table width="320" align="center"><tr><td align="center"><![endif]--> 
    <table width="90%" align="center" style="max-width:320px;"> 
    <tr> 
    <td align="center">This content will be at 90% width of the container up to 320px wide, where it will stop</td> 
    </tr> 
    </table> 
    <!--[if (gte mso 9) | (IE)]></td></tr></table><![endif]--> 
</td> 
</tr> 
</table> 
<!--[if (gte mso 9) | (IE)]></td></tr></table><![endif]--> 

Answer 2

내 경험에 따르면 이메일 클라이언트는 인라인 스타일 만 허용합니다. 이메일 모바일 응용 프로그램에만 모든 스윙을하지 브라우저에서 email.If의 내용을 열고 이메일 스윙을 지원

귀하의 요구 사항에 따라, 당신은

<div><!--email client body--> 

    <table width="650px;padding:50px;"><!--you can give padding not only margin properties of CSS--> 
     <table style="width:100%"> 
      <!--content--> 
       <table style="padding:20px"></table><!--Again added to padding instead of margin---> 
     </table> 

    </table> 

</div> 

주은, 코드 아래에 설정해야합니다 주장한다.