email
하이브리드 이메일 코딩
수색…
소개
전자 메일 클라이언트가 media-queries
지원하지 않는 경우 하이브리드 방식을 사용하여 미디어 쿼리 지원에 관계없이 전자 메일 클라이언트의 다양한 화면 크기에 맞게 레이아웃을 다시 구성 할 수 있습니다. 유동 테이블과 최대 너비 및 최소 너비를 사용하여 약간의 움직임을 허용하는 엄격한 기준선을 적용하고 어쨌든 데스크톱에 묶인 Outlook의 고정 너비를 부과합니다. 모바일 친화적 인 기준선이 설정되면 미디어 쿼리는이를 지원하는 클라이언트에서 이메일을 점진적으로 향상시킵니다.
단일 컬럼, 유체 레이아웃
하이브리드 코딩의 기본 설정은 단일 유체 열입니다. 대부분의 이메일 클라이언트는 max-width
지원하기 때문에 <table>
의 너비를 100 % (유동적)로 설정할 수 있지만 최대 너비 (이 경우 660px
를 초과 할 수 없습니다. 웹에서와 마찬가지로.
그러나 Microsoft는 max-width
지원하지 660px
테이블을 100 % 너비로 렌더링하므로 Microsoft 조건 태그를 사용하여 <table>
의 하드 너비를 660px
로 설정하는 " 고스트 테이블 "을 설정합니다. Windows 데스크톱 Microsoft는 데스크톱 전용이므로 작은 크기에서도 유동적 일 필요는 없습니다. 그리고 Windows 데스크톱 Microsoft는 이러한 Microsoft 조건부 태그를 지원하는 유일한 전자 메일 클라이언트이기 때문에 실수로 다른 클라이언트를 660px
바탕 화면 너비로 제한 할 수 없습니다.
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="">
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top">
<p>Content Goes Here.</p>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow