Outlook 365 电子邮件的响应式 HTML 表格

问题描述 投票：0回答：1

我正在尝试使用 flex 创建响应式 html 表格 css，但这不起作用。

我想知道有什么方法可以为 outlook365 灵活工作，或者有什么方法可以为 outlook365 创建响应表

html css outlook responsive httpresponse
1个回答
0
投票

您不能在任何 Windows Outlook 客户端中使用

display:flex
。这里有一个 caniemail 服务可以指导您。任何 HTML 电子邮件的最佳解决方法是使用 
table
。为了使您的表格单元格响应，您可以使用
@media queries
.

举个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" initial-scale="1">
    <!--[if !mso]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    <style>     
        @media only screen and (max-width: 700px) {       
            .resp-row td {
                display: block !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                width: 100% !important;
            }              
        }
    </style>
</head>
<body>   
    <table align="center" class="parent-table" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td>
                    <table border="0" cellspacing="0" cellpadding="0" width="100%" style="background-color: white; max-width: 800px;">
                        <tr>
                            <td valign="top" style="padding-left: 50px; padding-right: 50px; padding-top: 25px; padding-bottom: 50px;">
                                <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center">
                                    <tr class="resp-row">
                                        <td valign="top" style="padding-right: 20px; width:50%;" class="pb10-m700">
                                            <img src="https://images.pexels.com/photos/4040649/pexels-photo-4040649.jpeg" width="100%" />
                                        </td>                                        
                                        <td valign="top" style="width:50%;">
                                            <h3 style="margin: 0; line-height: 1.2em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
                                            <p style="margin-top: 10px; font-size: 14px;">Proin ullamcorper orci vitae tellus consectetur laoreet. Duis diam risus, cursus eu tincidunt nec, placerat eget ex. Aenean suscipit cursus sem et gravida. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                                            <a href="#" style="text-align: center; color: #5ac3d8; font-weight: 700; text-decoration: none;">READ MORE</a>
                                        </td>                                        
                                    </tr>
                                </table>
                            </td>
                        </tr>                                                 
                    </table>
                </td>
            </tr>
        </tbody>
    </table>  
</body>
</html>

因此，通过将 

td
显示属性设置为块，在所需的屏幕尺寸上，例如
@media only screen and (max-width: 700px)
将堆叠您的表格单元格。

请注意，如果您使用 Mailchimp 等邮件程序发送电子邮件，它将起作用，如果您只是将粘贴的 HTML 页面复制到您的电子邮件中，它将不起作用。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.