当前位置: 首页 > 知识库问答 >
问题:

媒体查询电子邮件

宇文灿
2023-03-14

我创建了带有媒体查询的响应式HTML电子邮件,但在Gmail/Outlook/Inbox中,媒体查询中的max-width指的是浏览器视口,而不是HTML电子邮件。

所以,在本地主机上,我的邮件切换到700px以下的移动显示,在Gmail/Outlook/Inbox中,这种行为被打破了。

您是否有一个解决方案,使媒体查询视口作为邮件视口,而不是浏览器视口?

共有1个答案

潘弘博
2023-03-14

没有。

理论上,JavaScript可以做到这一点,但您不能编写JavaScript在HTML格式的电子邮件中运行。

容器查询也可以做到这一点,但它们是如此的锋利,以至于在撰写本文时,只有Chrome支持then和then,只有用户在设置中显式地启用了该功能。

 类似资料:
  • 我需要建立一个响应的电子邮件模板。我做了我的研究,并了解到媒体查询不是广泛支持电子邮件客户端。 因此,我尝试不使用媒体查询,并使用。 > 但是如果我想更改移动版本的字体大小怎么办?另外,我有一个案例,客户端希望很少的块是可见的,在移动,但不是在桌面。没有媒体查询,我如何实现这些? 另外,在我添加样式规则和媒体查询的情况下,我猜iOS支持媒体查询。但是媒体查询下的规则不会出现,但是中定义的其他规则可

  • 我们有一份时事通讯,它使用媒体查询,以一种响应式的格式显示出来,适用于较小的屏幕。它在Outlook中按应显示的方式显示,但在转发电子邮件时,Outlook似乎正在删除媒体查询代码。我们正在使用Outlook发送电子邮件,因为我们需要包含exchange列表。有没有人知道Outlook在转发时删除媒体查询代码的方法,或者通过Outlook发送带有媒体查询的电子邮件的另一种方法?

  • 主要内容: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中执行此操作,但是它将通过展开它们并使用运算符将它们组合在一起。 这是一个普遍的问题,一