移动响应式设计不适用于 Outlook答案

【问题标题】：Mobile responsive design not working for outlook移动响应式设计不适用于 Outlook
【发布时间】：2020-04-08 12:27:50
【问题描述】：

我正在为 Outlook 设计电子邮件模板。需要您的支持来优化移动响应设计。附上图片以供参考。我尝试了媒体查询，但电子邮件模板似乎不支持内部 CSS。

> <!DOCTYPE html>
>     <html>
>       <head>
>           <meta http-equiv=Content-Type content='text/html charset=UTF-8' />
>           <meta name=viewport content='width=device-width, initial-scale=1.0'/>
>           <style>
>     @media only screen and (max-width: 600px){
>       td { 
>       display:table-row;
>       padding-left:32px;
>       height:100%;
>       border:1px dotted red;
>       text-align:center;
>       position: relative;
>       padding: 50%; 
>       }
>       table{
>       height:100vh;
>       width: 100%!important;
>       }
>       .panel{
>           width: 100%;
>             margin-bottom: 15px;
>             overflow-y: hidden;
>             -ms-overflow-style: -ms-autohiding-scrollbar;
>             border: 1px solid #ddd;
>       }
>       .panel > .table {
>             margin-bottom: 0;
>               
>         }
>       .panel > .table > thead > tr > th,
>         .panel > .table > tbody > tr > th,
>         .panel > .table > tfoot > tr > th,
>         .panel > .table > thead > tr > td,
>         .panel > .table > tbody > tr > td,
>         .panel > .table > tfoot > tr > td {
>             white-space: nowrap;
>           display: block;
>           width:100%;
>         }
>       }
>       </style>
>       </head>
>       <body>
>           <div class='panel'>
>               <div class='heading' style = 'background-color:#0BF4CD; border-style:none;mso-line-height-rule: exactly;line-height:
> 30px;'>&nbsp;</div>
>               <div class='panel-body' style='margin: 0;padding: 0;'>
>                   <table style='width: 100%; font-size: 16px;border-collapse:collapse;' border='1' bordercolor='#A9A9A9'
> cellspacing='0' cellpadding='0'>
>                       <tbody>
>                           <tr style='color:#000000'>
>                               <td style='padding-left:32px'>
>                                   <strong>Customer Impact</strong>&nbsp;
>                               </td>
>                               <td style='padding:10px 0 7px 15px'>&nbsp;
>                                   <span id='spanCustomer_Impact'>[[textarea:Customer_Impact]]</span>&nbsp;
>                           
>                               </td>
>                           </tr>
>                           <tr style='color:#000000'>
>                               <td style='padding-left:32px'>
>                                   <strong>Notes</strong>&nbsp;
>                           
>                               </td>
>                               <td style='padding:10px 0 7px 15px'>&nbsp;
>                               
>                                   <span id='spanReason_for_Notification'>[[textarea:Reason_for_Notification]]</span>&nbsp;
>                           
>                               </td>
>                           </tr>
>                           <tr style='color:#000000'>
>                               <td style='padding-left:32px' rowspan='4'>
>                                   <strong>Timestamp</strong>&nbsp;
>                           
>                               </td>
>                               <td style='padding:7px 0 0 15px; border-bottom-style:hidden!important'>&nbsp;
>                               
>                                   <strong>Notification Date/Time (EST):</strong>&nbsp;
>                               
>                                   <span id='spanNotification_Time'>[[date:Notification_Time]]</span>
>                               </td>
>                               <tr style='color:#000000'>
>                                   <td style='padding:7px 0 0 15px; border-bottom-style:hidden!important'>&nbsp;
>                                   
>                                       <strong>Start Date/Time (EST):</strong>&nbsp;
>                                   
>                                       <span id='spanStart_Date'>[[date:Start_Date]]</span>
>                                   </td>
>                               </tr>
>                               <tr style='color:#000000'>
>                                   <td style='padding:7px 0 0 15px; border-bottom-style:hidden!important'>&nbsp;
>                                   
>                                       <strong>End Date/Time (EST):</strong>&nbsp;
>                                   
>                                       <span id='spanEnd_Date'>[[date:End_Date]]</span>
>                                   </td>
>                               </tr>
>                               <tr style='color:#000000'>
>                                   <td style='padding:7px 0 7px 15px'>&nbsp;
>                                   
>                                       <strong>Expected End Date/Time (EST):</strong>&nbsp;
>                                   
>                                       <span id='spanExpected_End_Time'>[[date:Expected_End_Time]]</span>&nbsp;
>                               
>                                   </td>
>                               </tr>
>                           </tr>
>                           <tr style='color:#000000'>
>                               <td style='padding-left:32px'>&nbsp;
>                               
>                                   <strong>Expected Duration</strong>&nbsp;
>                           
>                               </td>
>                               <td style='padding:10px 0 7px 15px' >&nbsp;
>                               
>                                   <span id='spanDuration'>[[string:Duration]]</span>
>                               </td>
>                           </tr>
>                       </tbody>
>                   </table>
>               </div>
>               <div class='footer' style = 'background-color:#0BF4CD; border-style:none;mso-line-height-rule: exactly;line-height:20px'>&nbsp;</div>
>           </div>
>       </body>
>     </html>

据我们所知，只有内联 CSS 可用于 Outlook。有没有办法为 Outlook 进行移动响应式设计以及如何实现？有人可以帮我做这个设计吗？我不太擅长设计。我需要你的支持。

【问题讨论】：

标签： html css outlook html-email

【解决方案1】：

您使用表格的想法是正确的，因为 Windows 上的 Outlook 桌面不支持浮动。但是，对于 Outlook 移动版，我假设您不是在谈论 Outlook 桌面版。在这种情况下，媒体查询应该可以工作，但前提是 CSS 是可接受的（但是，某些手机也不使用嵌入式 CSS，例如通过 IMAP 使用的 Gmail）。

您可以尝试https://www.caniemail.com/ 以获取有关所需内容的具体建议。

对于一般方法，最好仅依赖内联 CSS，而不是使用媒体查询的响应式方法。您可能想尝试混合流体方法，详见此处：https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

基本元素是使用 div 包装器浮动：<div style="display:inline-block;width:100%;max-width:300px;vertical-align:top">

还有一个针对 Outlook 的回退，不支持max-width，如下：

        <!--[if (gte mso 9)|(IE)]>
        <table width="100%">
        <tr>
        <td width="50%" valign="top">
        <![endif]-->
        [column to go here]
        <!--[if (gte mso 9)|(IE)]>
        </td><td width="50%" valign="top">
        <![endif]-->
        [column to go here]
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->

【讨论】：