Gmail拾取部分媒体查询样式（Mailchimp）
我正在完成一个Mailchimp模板，Gmail是现在最头疼的。
在我的头脑中，我有一些样式（css）和媒体查询。如果我把media-queries放在底部，它会阻止大多数样式通过。如果我把媒体查询放在顶部--我的所有样式都工作得很好，但是邮件看起来“坏了”（就像它应该在600px宽度/移动），就像媒体查询已经开始了。
首先，我认为Gmail不应该读取媒体查询中的任何内容，其次，为什么我的邮件显示为“响应”，当我有完全的浏览器宽度？
----顺便说一句----我知道我可以遍历所有内容并添加内联样式，但是，我有三个模板，如果我能摆脱它，我宁愿不要：）
共有1个答案
通过大量的谷歌搜索，我发现我并不是世界上唯一一个有这种（奇怪的）问题的人。我在下面引用Lucas Mainardi的话，他在Outlook.com上发表了一个类似问题的答案。
基本上，在结束的body标记之前为媒体查询添加一个额外的style标记就可以解决问题。
我在我的设备(gmail、iphone、thunderbird)上进行了测试，它似乎不会对以前没有问题的客户造成任何损害。我还在等待我的Mailchimp收件箱检查完成（在那里我测试了更多的客户端，如Outlook，Android等）。我会编辑我的答案，如果它似乎有任何危害，否则就认为这是一个解决方案。
你好詹姆斯,
在评论中，我在Outlook.com上发布了一个可能的解决方案。
问题似乎是加载电子邮件的区域。显然，该区域开始时的大小很小，几秒钟后就被调整了大小，但在这段时间内，媒体查询启动并显示移动版本。这是因为在代码的层次结构中首先读取媒体查询（它们在head部分），然后读取HTML电子邮件。
我发现的解决方案是将包含媒体查询的style部分放在HTML电子邮件之后，特别是在结束的body标记的正上方。
我在Litmus中试用了这一方法，所有的方法似乎都运行得很好（其他浏览器/移动设备/电子邮件服务器似乎都没有受到负面影响，显示的是与邮件头部分的样式完全相同的电子邮件版本）。
摘自http://emailwizardry.nightjar.com.au/2013/08/28/media-queries-in-html-email-cover-all-your-bases/
-
图片 使用 Materialize 可以使用不同的方法给图片样式。 响应式图片 是图片的宽度适应页面的宽度，你可以增加类 responsive-img 到图片标签中。 现在它有 max-width: 100% 和 height:auto。 <img class="responsive-img" src="cool_pic.jpg"> 圆形图像 为了使用图片出现圆形，给它们增加 cla
-
问题内容： 我正在尝试使用LESS（不喜欢SASS语法），并且一直在尝试找出使用它进行媒体查询的最佳方法。 我通过阅读本关于如何“做”媒体查询用更少的博客文章，但它指出了一个事实，即这会导致所有的媒体查询整个所得CSS进行分离和分散。这真的并没有打扰我（我不太关心结果，而更多地关心它的工作）。令我困扰的是一条评论，其中提到了从iOS设备查看内容时遇到的问题，评论者发现，媒体查询一经整合，问题便得以
-
主要内容：1. 媒体类型,2. 媒体特性,3. 逻辑操作符,4. 定义媒体查询随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。 媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不
-
响应式网站设计只有弹性布局这一个技巧是不够用的，媒体查询（ media queries ）也是响应式设计的核心技巧之一。媒体查询是可应用于 CSS 样式的简单过滤器。有了这些过滤器，我们可以根据设备呈现内容的特点轻松更改样式，包括显示屏类型、宽度、高度、方向甚至是分辨率。 在 CSS2.1 中定义了媒体类型，通过给 元素添加 media 属性，可以为不同的媒体类型加载不同的样式表。 <link r
-
在早些时候，为了满足移动用户的需求，需要为移动设备专门建立一个额外的网站。随着响应式设计的出现，这种做法已经越来越少见了。 2010年5月25日，Ethan Marcotte在A List Apart上发表了一篇开创性的文章，在这篇名为Responsive Web Design的文章中，他将媒体查询、弹性网格布局、弹性图片这三种已有的开发技术整合起来，并命名为响应式Web设计（RWD，Respon
-
问题内容： 默认情况下，我想给我的body元素添加绿色边框。在支持视网膜显示的设备上，我要首先检查尺寸。在ipad上，我想给我的身体一个红色边框，在iphone上，我想给它一个蓝色边框。但是像这样嵌套媒体查询是行不通的： 问题答案： 否。您需要使用运算符并将其写为两个查询。但是，您可以在将编译为CSS的SCSS中执行此操作，但是它将通过展开它们并使用运算符将它们组合在一起。 这是一个普遍的问题，一