gpt4 book ai didi

css - 响应式电子邮件模板中的媒体查询

转载 作者:技术小花猫 更新时间:2023-10-29 11:40:02 26 4
gpt4 key购买 nike

我需要构建一个响应式电子邮件模板。我做了研究,了解到媒体查询并没有得到电子邮件客户端的广泛支持。

因此,我尝试不使用媒体查询并使用 display: inline-block; max-width:290px; 堆叠列.

  1. 但是如果我想更改移动版本的字体大小怎么办?我还有一个案例,客户希望在移动设备上看到几个 block ,但在桌面上看不到。我如何在没有媒体查询的情况下实现这些?

  2. 此外,在我添加样式规则和媒体查询的情况下,我猜 iOS 支持媒体查询。但是媒体查询下的规则没有出现,但其他规则在 <style></style> 中定义。工作得很好。

模板看起来有点像这样:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
table {
font-size: 24px;
}
#tdtoshowinmobile {
display: none;
}
@media only screen and max-device-width(767px){
table {
font-size: 32px !important;
}
#tdtoshowinmobile {
display: block !important;
}
}
</style>
</head>

<body>


<table>
...tr...td....
</table>
</body>

上面的模板将常规规则添加到内联元素,但在我的例子中删除了媒体查询。我读到一篇文章说邮件客户端删除样式标签并将其添加到内联元素中。我想由于媒体查询不能内联定义,所以它们被忽略了。

所以,我的问题是:

  1. 如何改变font-sizecolor在不使用媒体查询的情况下在响应式电子邮件模板中添加其他内容?

  2. 如何以正确的方式添加媒体查询?(对我来说,在 style 标签中添加它们不起作用)

最佳答案

1 认为它只能使用媒体查询来完成。
一些流行的移动邮件客户端支持媒体查询,所以在我看来这是值得的。

2 希望这段代码能帮到你

@media screen and (max-device-width: 767px),
screen and (max-width: 767px) {

}

另外,也许使用一些 doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果您正在寻找包含多列的响应式电子邮件示例,请查看 litmus或其他免费模板(this 一个看起来非常不错的例子)

关于css - 响应式电子邮件模板中的媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40340590/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com