我正在使用SendGrid编辑器制作一个设计好的电子邮件，我在解决如何正确地在移动视口中呈现电子邮件时遇到问题。目前在桌面上看起来很好。使用http://tedgoas.github.io/Cerberus/作为具有无数内联样式的样式基础。
目前：完整的桌面电子邮件会在移动设备上完整呈现，会被切断。
目标：让设计的桌面电子邮件完全适合iOS Mail.app和Gmail应用等客户端上的视口。
任何指针都会非常感激。
<!DOCTYPE html>
<html lang="en" style="height:100%; width:100%;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<!-- utf-8 works for most cases -->
<meta http-equiv="X-UA-Compatible"; content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting">
<!-- Disable auto-scale in iOS 10 Mail entirely -->
</head>
<body bgcolor="#fff" height="100%" style="margin: 0; mso-line-height-rule: exactly;" width="100%">
</body>
</html>
<div><br />
<title>Personalized Note</title>
<style type="text/css">/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
.mobile-link--footer a,
a[x-apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
.ExternalClass {
width: 100%;
}
</style>
<style type="text/css">/* Media Queries */
@media screen and (max-width: 600px) and @media only screen and (-webkit-min-device-pixel-ratio: 2) {
.email-container {
width: 100% !important;
margin: auto !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
<center style="width: 100%; background: #fff;"><!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">A message from %spouse1_firstname & %spouse2_firstname%</div>
<!-- Visually Hidden Preheader Text : END --><!-- Email Header : BEGIN --><!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="email-container" height="100%" role="presentation" style="margin: auto;max-width:100% !important;" width="650">
<tbody>
</tbody>
<!-- 1 Column Text : BEGIN --><!-- Background Image with Text : END --><!-- 1 Column : BEGIN -->
<tbody>
<tr>
<td align="center" bgcolor="#000000" style="padding-top:60px;max-width:100%;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" height="100%" role="presentation" width="100%">
<tbody>
<tr><!-- Column : BEGIN -->
<td background="https://s3-us-west-2.amazonaws.com/vr-ac-demo/bg-Wide.jpg" class="stack-column-center" style="padding-bottom:64px;background-size:100% 100%;max-width:100%;">
<table border="0" cellpadding="0" cellspacing="0" height="300" role="presentation" style="padding-top: 20%;" width="530">
<tbody>
<tr>
<td style="text-align: center; height: 100% !important; background: #000000; font-family: sans-serif; font-size: 15px; line-height: 20px; color: rgb(85, 85, 85); width: 100% !important;border:1px solid white;"><span contenteditable="false" tabindex="-1"><span class="sg-image" data-imagelibrary="%7B%22width%22%3A140%2C%22height%22%3A140%2C%22alignment%22%3A%22center%22%2C%22border%22%3A1%2C%22src%22%3A%22https%3A//s3-us-west-2.amazonaws.com/vr-ac-demo/square+crop+image.jpg%22%2C%22classes%22%3A%7B%22sg-image%22%3A1%7D%7D" data-widget="sgimage" style="float: none; display: block; text-align: center;"><img height="140" src="https://s3-us-west-2.amazonaws.com/vr-ac-demo/square+crop+image.jpg" style="height: 140px; width: 140px; border: 1px solid transparent; margin-top: 20px; border-radius: 80px;" width="140" /></span></span>
<p style="font-size:23px;font-family:arial;color:#fff;margin-top:153.9;padding-bottom:6px;">HANNAH & MASON</p>
<table align="center" border="0" cellspacing="0" height="400" width="470">
<tbody>
<tr>
<td style="border:1px solid #ff69b4;">
<p style="font-size:14px;color:#ccc;text-align:left;padding: 0 4px 20px 4px;margin-left:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a orci id magna pharetra tristique et ac risus. Aenean ultricies convallis lorem. Integer vitae dignissim nisi. Nam ligula ipsum, accumsan vel mi a, ultrices tempus dolor. Curabitur mauris tortor, lacinia quis maximus nec, finibus eget velit. Nulla egestas ultricies risus. Curabitur velit nisl, semper at varius et, rutrum in ex. Ut condimentum aliquet malesuada. Curabitur rutrum interdum neque a luctus. Pellentesque sed convallis est, sed vehicula mi. Sed placerat tincidunt enim, et fringilla orci semper nec. Fusce vitae felis pharetra, consequat tellus vel, consectetur massa. Nullam convallis ex risus, at consequat justo vestibulum et. Mauris ultrices feugiat nisi, eu ornare dolor volutpat quis. Cras tincidunt lobortis justo sed accumsan.</p>
</td>
</tr>
</tbody>
</table>
<p style="font-size:12px;text-align:center;margin-top:20px;color:#ccc !important;width:86%;max-width:100%;margin-left:38px;text-decoration: none !important;padding-bottom:10px;line-height:1.4;">Download our App Store or Google Play and enter:<br />
your email: email@mac.com and code: (code)<br />
or visit us at company.com</p>
</td>
</tr>
</tbody>
</table>
</td>
<!-- Column : END -->
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Column : END --><!-- Column : BEGIN --><!-- Email Body : END --><!-- Email Footer : BEGIN -->
</tbody>
</table>
<!-- Email Footer : END --></center>
</div>
答案 0 :(得分：0)
您是否尝试使用媒体查询？
示例：
@media screen and (max-width: 768px){
.class{
---
}
}