Media Queries not working in Gmail
Question
I am developing an email newsletter that works on almost all clients - but for some reasons its not working on gmail. Basically, I want the font-size to be different across devices (bigger fonts on small devices).
However, Gmail seems to be completely ignoring the media query at all, and is rendering the desktop version. I tried different approaches - somebody said to create a new style to accomodate the media query, still didn't worked.
Below is the css code in the html. Can someone please help me?
<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>
1 answers
solution1
0 2018-04-22 14:30:19
对于新闻通讯，您应该使用MJML模板，该模板与所有电子邮件客户端兼容，并且还提供响应式布局
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.