如何使用@Media 查询

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，我不需要顶部响应，所以我如何 link CSS

的第二个

我有我所有的表格，桌面设计看起来很完美'例如，div 和表格是“%”而不是 'px'，当它缩小到移动设备时，我有 2 个相邻的 div 它们是仍然占浏览器屏幕的 50%（移动设备和桌面设备的 50%），但当它们缩小时，我希望它们占移动屏幕的 100%

Answer 1

<head>
    <style>
        @media only screen and (max-width: 771px) {
            /*add your class and code here*/
        }
    </style>
</head>

Answer 2

<style> 标签将进入 <head> 标签。

但要小心你使用的某些平台有abysmal email CSS support, also see this。

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

但老实说，我不会费心从头开始构建它，这太繁琐了；你必须让它在不同的平台上工作。

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

*注意：通常使用 HTML 电子邮件，您会使用表格而不是网格来布置所有内容。

Answer 3

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

第一个是 <style> 标签。您的电子邮件将具有 <html>-><head>-><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

已经完成并使用并尝试它没有在 table 结构

中的媒体中使用

<table width="600px" max-width="100%" align="center">
  <tr><td>content......</td><td>content....</td></tr>
  <tr><td>content......</td><td>content....</td></tr>
  <tr><td>content......</td><td>content....</td></tr>
  <tr><td>content......</td><td>content....</td></tr>
</table>

Answer 5

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

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

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

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

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

希望此信息对您有所帮助。

参考文献：

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

Acid 电子邮件 - 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/

如何使用@Media 查询

How to use @Media queries

html

css

email

html-email