Question

我正在开发一个几乎适用于所有客户的电子邮件简报 - 但由于某些原因，它不适用于gmail。基本上，我希望不同设备的字体大小不同（小型设备上的字体越大）。

然而，Gmail似乎完全忽略了媒体查询，并且正在呈现桌面版本。我尝试了不同的方法 - 有人说创建一种新的风格来容纳媒体查询，仍然没有奏效。

下面是html中的css代码。有人可以帮助我吗？

    <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>abc</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Lato');
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

/* Prevent WebKit and Windows mobile changing default text sizes */

table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}

/* Remove spacing between tables in Outlook 2007 and up */

img {
-ms-interpolation-mode: bicubic;
}

/* Allow smoother rendering of resized image in Internet Explorer */

/* iOS BLUE LINKS */

a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}

/* ANDROID CENTER FIX */

div[style*="margin: 16px 0;"] {
margin: 0 !important;
}

.rollover:hover>img,
* [summary=rollover]:hover>img {
max-height: 0px !important;
}

/* Hides visible image on rollover */

.rollover:hover>div img,
* [summary=rollover]:hover>div img {
max-height: none !important;
}

/* Makes hidden image appear in its place */

.font-mobile {
font-size: 16px;
}

h1 {
font-size: 30px;
font-family: 'Lato', sans-serif;
line-height: 1.5;
color: #004aa5;
font-weight: normal;
}
h1 span{
font-size: 20px;
}

p,
.p {
font-size: 14px;
font-family: 'Lato', sans-serif;
line-height: 1.6;
color: #000000;
}

.findout {
font-size: 18px;
}

.btn {
width: 242px;
}

.TC {
color: #4484df;
font-size: 12px;
}

.footer {
font-size: 12px !important;
color: #afafaf;
}

/* ... */

/*--- Preheader declaration in style block in addition to inline for Outlook */

.preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: transparent;
height: 0;
width: 0;
}
</style>

<style type="text/css">

@media screen and (max-width:600px) {

p {
font-size: 28px !important;
}

}

</style>
</head>

Answer 1

对于时事通讯，您应该使用MJML模板，它与所有电子邮件客户端兼容，并且还提供响应式布局

媒体查询无法在Gmail中使用

1 个答案: