【问题标题】:Can HTML email be fixed in gmail, fluid in mobile?HTML电子邮件可以在gmail中修复,在移动设备中流动吗?
【发布时间】:2013-04-30 21:30:33
【问题描述】:

创建 HTML 电子邮件,我有以下看似无法解决的问题:

  • Gmail 会删除任何内容。您必须使用内联样式。
  • 我希望我的设计在移动设备(特别是 Android)上有所不同,我可以通过头部的媒体查询来做到这一点
  • 但内联样式会覆盖头脑中的任何内容。

那么我该如何设计,例如,在 Gmail 中为 600 像素宽,而在 Android 中为 100% 宽?

【问题讨论】:

    标签: android css html-email fluid-layout


    【解决方案1】:

    使用这个内联css:style='width:100%;最大宽度:580 像素;' 一旦屏幕宽度下降到 580 像素以下,布局就会变得流畅。 您可以更改任何适合您需要的值。这样,您就不会遇到很多跨客户端问题。顺便说一句,Gmail 应用程序不支持标签。

    【讨论】:

      【解决方案2】:

      您可以尝试为不删除它们的电子邮件客户端嵌入<style> 标记,并使用 !important 覆盖内联规则。它看起来像这样:

      @media all {
          width:100% !important;
      }
      

      如果有效,请告诉我...

      【讨论】:

      • 我编辑了这个答案以包含 CSS 类声明 .content {width:100% !important;}。您需要将其包含在您希望采取相应行动的表格中。
      • 可以是任何普通的 css 声明 - 不需要是 @media all 部分,如果您只需将 !important 添加到末尾,则可以与 style 标签中的任何 css 样式一起使用。 !important 比 inline 具有更高的优先级。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-06-05
      • 2020-09-16
      • 2023-03-17
      • 1970-01-01
      • 2021-05-03
      • 2011-04-01
      • 2016-11-05
      相关资源
      最近更新 更多