Question

我正在创建一个电子邮件模板，我正在努力使其成为现场响应我遇到了问题，我一直在研究使用"@media"标签，但是电子邮件却没有。我真的很喜欢<style>，所以我真的不知道怎么做。

<body>
 <table>
  <table>
   <tr>
    <td>
     text blah blah
    </td>
   </tr>
  </table>
<!-- This is the one I was responsive (The one below) -->
  <table>
   <tr>
    <td>
      Make this table responsive <3
    </td>
   </tr>
  </table>
 </table>
</body>

P.S，我不需要顶部响应，所以如何将第二个链接到CSS

我的所有桌子和桌面设计看起来都很完美＆＃39; E.G div和table是＆＃39;％＆＃39;不是＆＃39; px＆＃39;当它缩小到移动设备时，我有2个div，它们仍然是浏览器屏幕的50％（50％的移动设备和桌面设备）但是当它们缩小时，我希望它们是100％的手机屏幕

Answer 1

var EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(element(by.repeater('alert in vm.alerts'))), 5000);

Answer 2

<style>标记会进入<head>标记。

但要小心你使用的某个平台有abysmal email CSS support，另见this。

我会限制在电子邮件中使用CSS3 / HTML5。

但老实说，我不打算从头开始构建它，它只是一项繁琐的任务;你必须让它在不同的平台上运行。

我会使用电子邮件HTML构建器（大多数是免费的），如：

*注意：通常使用HTML电子邮件，您可以使用表格而不是网格来处理所有内容。

Answer 3

在HTML电子邮件中，您有两种方法可以完成所有样式设置，因为您无法拥有单独的样式表。

第一个是<style>标记。您的电子邮件的结构为<html> - ＆gt; <head> - ＆gt; <body>。

<style>标记只能放在头部，因此您的设置应如下所示。

<html>
  <head>
    <style>
      @media screen only (max-width:767px){
        /* Your CSS goes here */
      }
    </style>
  </head>
  <body>
    /*HTML Code goes here */
  </body>
</html>

您拥有的另一个选项只有在您只想更改宽度时才会起作用，并且会在元素的内联样式中使用百分比，如下所示：

<div class="header-block" style="width:100%;"></div>

您可以在litmus.com上的电子邮件中找到有关使用媒体查询的更多信息。

如果您已经在样式标记中使用了额外的CSS，那么Inline styler工具可能会帮助您将嵌入样式转换为内联样式。

Answer 4

使用媒体查询有两种方法 - 先移动或桌面移动。

对于刚刚进入HTML CSS的人来说，获得最多支持并且可能最简单的方式是桌面优先方法。在此，您将为桌面渲染内联所有样式。然后，您可以为不同的断点添加媒体查询，以使电子邮件适合设备屏幕。这是最简单的并且得到最多支持，因为唯一不支持媒体查询的移动电子邮件客户端就像Gmail应用程序（通常只占移动受众的一小部分）。问题在于，以Gmail应用程序为例，根据您设置电子邮件的方式，这可能会导致Gmail应用程序中断 - 导致显示问题。

这是移动第一种方法的用武之地.Mobile首先使用内联样式构建电子邮件，以便在gmail应用程序中正确显示，然后使用媒体查询和mso条件语句使其充实并在桌面显示上正确填充。这需要更多的CSS知识和电子邮件客户端的怪癖和黑客＆＃39;但可以创建在所有客户端上精美显示的电子邮件。由于电子邮件客户端中不同处理器的复杂性，这有时可能需要更多样式和更多代码才能完成。

对于最初的尝试，我建议首先建立桌面，然后使用媒体查询移动，因为它很简单，支持得更广泛，因此需要更少的黑客。

有关支持的CSS的帮助，请参阅 - http://www.campaignmonitor.com/css

希望这些信息有所帮助。

参考文献：

Litmus - https://litmus.com/blog/understanding-media-queries-in-html-email

关于酸的电子邮件 - https://www.emailonacid.com/blog/article/email-development/media_queries_in_html_emails

CampaignMonitor - https://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/

Answer 5

已经完成并使用并尝试了它没有在表结构中的Media中使用

var lastWordTyped: String? {
        if let documentContext = proxy.documentContextBeforeInput as NSString? {
            let length = documentContext.length
            if length > 0 && NSCharacterSet.letterCharacterSet().characterIsMember(documentContext.characterAtIndex(length - 1)) {
                let components = documentContext.componentsSeparatedByCharactersInSet(NSCharacterSet.alphanumericCharacterSet().invertedSet) as! [String]
                return components[components.endIndex - 1]
            }
        }
        return nil
    }

如何使用@Media查询

5 个答案: