查询来为平板电脑设置规

seorafi754

这个查询的真正含义是，如果 [device width] 大于或等于 600px，那么如果电子邮件被打开，则执行 {... }在屏幕宽度为320px 的 iphone 5s 上，不会触发媒体查询，并且 { ... } 中包含的样式不会生效。组合媒体查询表达式可以一起使用来定位特定的屏幕尺寸范围。 上面的查询只会在宽度为 600-400px 的屏幕上触发。这可用于定位具有已知宽度的特定设备。 CSS 技巧有一个标准设备宽度和要使用的媒体查询的列表。断点大多数媒体查询都设置为在某些屏幕宽度或断点处触发。这些究竟应该设置成什么是电子邮件开发人员之间存在争议的问题。 iPhone 和 iPad 为我们提供了一些简单的起点。针对这些特定客户的编码风格将确保电子邮件在这些屏幕上看起来很棒。


另一方面，Android设备的屏幕尺寸差异很大，因为有许多不同的制造商和设备。我建议根据流行的苹果设备创建两到四个断点，这将覆盖大多数设备。 Iphone 5s 是具有 320px 的断点1 的示例 iPhone 6+ 是具有 414px 的断点 2 的示例  是具有 703px 的断点 3 的洪都拉斯电话号码表示例 ipad Air 是具有768px 的断点 4 的示例 断点 3 和 4 是可选，因为大多数电子邮件在 iPad 或大型平板电脑上显示桌面版本看起来不错。如果您将容器表编码为扩展至100% 宽度（而不是设定宽度，这可能会或可能不会与设备很好地匹配），您甚至可以只使用断点 2。请记住，利用优先级，如果嵌入样式中较后出现的 css 规则具有相同的特殊性，则它们会覆盖较早的规则。这意味着您可以通过先放置断点4 媒体则，然后使用断点 2 媒体查询为移动设备设置样式。由于断点 2 样式位于断点 4 之后，因此当触发断点 2 查询时，您的移动设备样式将覆盖您的平板电脑样式。





这意味着您不必为任何媒体查询设置min-width，只要它们按正确的顺序排列即可。以下是一个示例顺序： 桌面样式（不在媒体查询中） 平板电脑样式（最大宽度：768px） 移动样式（最大宽度：414px）通常只使用一个媒体查询和断点来生成一封电子邮件，选择一个适合您内容的断点，例如具有并排两列且宽度为 300 像素的电子邮件。断点将是 600 像素，即列中的内容开始被压缩之前的最小宽度。在600 像素时，列可以堆叠在一起并扩展到设备宽度。在电子邮件中使用媒体查询进行媒体查询编码确实有助于定位并使您的电子邮件具有响应能力。但是，您通常会添加CSS 样式，也可以插入媒体查询。在下面的示例中，通过在 html 中嵌入 css，您可以在标签之间包含媒体查询。第 1 步在样式标签之间添加一个类和您想要的css。在本例中，类是 .100pc，这类似于移动设备上广泛使用的类，使表和元素拉伸到设备的整个宽度或包含表。第 2 步我们现在在类周围添加媒体查询。在这种情况下，对于最大屏幕尺寸为640px 的设备。第 3 步现在我们添加！重要（电子邮件开发人员的灵丹妙药）。对于某些需要内联样式的电子邮件客户端，您必须在样式后添加 !Important以确保其覆盖内联样式。第 4 步将类添加到 html 元素：在对电子邮件进行编码时，使用媒体查询对两列进行编码使用媒体查询进行响应，一种常见的技术是创建带有