email
하이브리드 이메일 코딩

Android ASP.NET C# Language CSS HTML Java Language JavaScript PHP Python Language Ruby on Rails
수색…


소개

전자 메일 클라이언트가 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