移动响应式设计不适用于Outlook
问题描述 投票：0回答：1
我正在为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;'> </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>
> </td>
> <td style='padding:10px 0 7px 15px'>
> <span id='spanCustomer_Impact'>[[textarea:Customer_Impact]]</span>
>
> </td>
> </tr>
> <tr style='color:#000000'>
> <td style='padding-left:32px'>
> <strong>Notes</strong>
>
> </td>
> <td style='padding:10px 0 7px 15px'>
>
> <span id='spanReason_for_Notification'>[[textarea:Reason_for_Notification]]</span>
>
> </td>
> </tr>
> <tr style='color:#000000'>
> <td style='padding-left:32px' rowspan='4'>
> <strong>Timestamp</strong>
>
> </td>
> <td style='padding:7px 0 0 15px; border-bottom-style:hidden!important'>
>
> <strong>Notification Date/Time (EST):</strong>
>
> <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'>
>
> <strong>Start Date/Time (EST):</strong>
>
> <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'>
>
> <strong>End Date/Time (EST):</strong>
>
> <span id='spanEnd_Date'>[[date:End_Date]]</span>
> </td>
> </tr>
> <tr style='color:#000000'>
> <td style='padding:7px 0 7px 15px'>
>
> <strong>Expected End Date/Time (EST):</strong>
>
> <span id='spanExpected_End_Time'>[[date:Expected_End_Time]]</span>
>
> </td>
> </tr>
> </tr>
> <tr style='color:#000000'>
> <td style='padding-left:32px'>
>
> <strong>Expected Duration</strong>
>
> </td>
> <td style='padding:10px 0 7px 15px' >
>
> <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'> </div>
> </div>
> </body>
> </html>
[据我们所知，只有内联CSS与Outlook一起使用。有什么方法可以进行Outlook的移动响应设计，以及如何实施？有人可以帮我这个设计吗？我的设计不是很好。我需要您的支持。
1个回答
0
投票
投票
您使用表有正确的主意，因为Windows上的Outlook桌面不支持浮点数。但是，对于Outlook Mobile，我假设您不是在谈论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]-->
最新问题
- IBM Worklight 6.1 - 如何在适配器中发送发布值？
- 如何通过 Retrofit 2 获得错误主体响应
- 将R中的数据框更改为sf对象，以便可以通过tmap绘制
- 我想问为什么要将数据分为 4 部分以获得 IQR 为什么不是 20 或 10%？
- Laravel 使用一张表中的条件进行多次计数
- 使用 redux-toolkit asyncThunks 刷新访问令牌
- Convert animateTransform SVG 的转换为动画 .gif 图像
- Flask Admin 在表视图中右对齐值
- 将 Selectize 应用于我的组件中的所有选择
- 打开只读模板会更改文件名
- 使用流将一种地图类型转换为另一种地图类型？
- 使一列中的列表组滚动，页面与较长的另一列对齐
- 在 Snowflake 中使用 DECRYPT 执行 AES 256 加密值的解密
- 连接两个 PySpark 数据帧而不重复行
- Phoenix：运行 mix ecto.create 编译 Ranch 依赖项时出错
- 从具有随机模式的字符串中提取值
- 如何根据Oracle数据库版本从同一个表返回不同的列？ （v$版本中的横幅与banner_full）
- 使用“openssl”命令行实用程序加密 JPEG，然后预览随机像素集
- 使用 getter 和 setter 时可能出现空引用警告
- 删除可点击 Div 周围的空白
© www.soinside.com 2019 - 2024. All rights reserved.