如何在没有媒体查询的情况下编写响应式 HTML 电子邮件（适用于 Gmail）？

How do I code a responsive HTML email without media queries (for Gmail)?

提问人：K8K 提问时间：9/21/2023 最后编辑：K8K 更新时间：9/21/2023 访问量：81

问：

我正在尝试编写我的第一封 HTML 电子邮件。我让它工作，一切看起来都很棒，直到我在移动设备上查看它，然后我看到一些我想做的小调整。我知道我必须使用所有内联CSS，因为Gmail无法识别样式标签。我不明白的是如何创建在不使用屏幕和 （max-width） 的情况下处理不同屏幕尺寸@media代码？任何帮助将不胜感激，因为我说我对此非常陌生。提前感谢您的帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--Quite a few clients strip your Doctype out, and some even apply their own. Many clients do honor your doctype and it can make things much easier if you can validate constantly against a Doctype.-->
<html>
    <head></head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=Edge" />
<title>Email template for USA Label Express</title>

<!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->
<!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->

<style type="text/css">
    
    /* some resets and issue fixes */
        #outlook a { padding:0; }
        body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }     
        .ReadMsgBody { width: 100%; }
        .ExternalClass {width:100%;} 
    .backgroundTable {margin:0 auto; padding: 0; width:100%; !important;}
    table td {border-collapse: collapse;}
    .ExternalClass * {line-height: 115%}
    
    /* End Reset */
    
    /* use to fix table positioning
    td{
        border:thin #000000 solid;
        
    }
    */
    
    /*Display block allows us to stack elements */
    
    *[class="mobile-column"] {display:block;}
    
    /*Some more stacking elements */
    
    *[class="mob-column"] {float: none !important; width: 100% !important;}
    
    /* hide stuff */
    *[class="hide"] {display: none !important;}
    
    /*This sets elements to 100% width and fixes the height issues */
    
    *[class="100p"] {width100% !important; height: auto !important;}
    
    /*for the 2x2 stack */
    
    *[class="condensed"] {padding-bottom: 40px !important; display block;}
    
    /*Centers content on mobile */
    
    *[class="center"] {text-align: center !important; width: 100% !important; height: auto !important;}
/*100percent width section with 20px padding */
    *[class="100pad"] {width: 100% !important; padding: 20px;}
    /*same as above with 20px padding left and right */
    *[class="100padleftright"] {width: 100% !important; padding: 0 20px 0 20px;}
    /*again but top and bottom */
    *[class="100padtopbottom"] {width: 100% !important; padding: 20px 0px 20px 0px;}
body {
    margin: 0;
}
body, table, td, p, a, li, blockquote {
    -webkit-text-size-adjust: none!important;
    font-family: Arial, "Helvetica Neue", Helvetica, "sans-serif";
    font-style: normal;
    font-weight: bold;
    color: #001588;
    font-size: 11px;
}
    
    table{
        border-spacing: 0px;
    }
    
    
    
    a {
        text-decoration: none;
    }
    
    #email{
        background-image: url("https://mcusercontent.com/e826d556957bbe51fc416e609/images/c7552f30-ebb5-ff4f-16aa-ab8921f6145e.jpg");
        background-repeat:no-repeat;
        background-color: #DBDCEF;
        background-size: cover;
        
    }
    
@media only screen and (max-device-width: 480px) {
    /* Here you can include rules for the Android and iPhone 
    native email clients. 
    
    Device viewport dimensions are as follows
    Iphone - 320px X 480px - portrait, 480px X 320px - landscape
    Android - 350px X 480px - portrait, 480px X 350px - landscape
    (These are average dimensions, the Android OS runs on several different devices)
    */
    
    .address{
        
        font-size: 7px !important;
    }
    
    }
    
    
    </style>
    </head>
    
    <body>
<div id="email" style="width:600px; height: 220px; margin-left:auto; margin-right:auto; ">

<!-- Top Text --> 
<table role="presentation" border="0" cellspacing="0" width="100%">
<tr>
    <td> <a href="http://www.usalabelexpress.com/LabelInformation.php?Capabilities-5"> <img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/bf2c9f86-218b-ec7f-c0ad-50543875f454.png
" alt="custom label printing, flexographic, digital, promotional products, small or large run capabilities, in house art dept" style="padding: 5px;" class="topText responsiveImage"></a> 
    </td>
</tr>
</table>

<!-- Body --> 
<table role="presentation" border="0" cellspacing="0" width="100%">
<tr style="border-spacing: 0px;">
    <td width="13%"> 
        <a href="https://www.usalabelexpress.com"><img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/53bab0ac-c3a4-1dcd-a8ff-31d20cf90e92.png"  alt="" height="" width="" style="padding-left: 15px;" class="eagle responsiveImage"></a> 
    </td> 
    <td width="53%"> 
        <a href="https://www.usalabelexpress.com"><img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/52310cc7-b1d1-4dca-63d9-c2718d4e3ac0.png"  alt="" height="" width="" class="logo responsiveImage" ></a> 
    </td>
    <td width="34%" style="text-align: right; padding-right: 10px;">
            
        <a href="https://usalabelexpress.com/Staff.php?Jim-Seldenright-9" style=" padding-left:60%; padding-top: 10%;"><img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/45f224f6-a3cb-2c49-1c92-0a25eedea4e7.jpg" alt="Jim Seldenright Salesman" height="" width="60px" class="repImage responsiveImage" style="border:1px solid #001588;">Jim Seldenright <br /> Sales Representative </a> 

    </td>
</tr>
<tr> 
    <td></td>
    <td style="text-align: center;">
        <div>
            <a href="https://www.facebook.com/usalabelexpress/"><img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/3d812f2a-b601-fbe3-97f7-03797e843efa.png"  alt="Facebook Icon" height="" width="8%" style="display: inline-block;" class="facebook responsiveImage"></a>
            <span><a href="https://www.usalabelexpress.com">www.usalabelexpress.com</a></span>
        </div>
    </td>
    <td style="text-align: right; padding-right: 10px; text-decoration:none;"> Cell: 330-432-6876 <br /> Email: [email protected] </td>
</tr>
</table>

<!-- Bottom Text -->
<table role="presentation" border="0" cellspacing="0" width="100%">
<tr>
    <td colspan="2" style="text-align:center;"><a href="https://www.google.com/maps/place/11206+Industrial+Pkwy+NW,+Bolivar,+OH+44612" style="text-decoration: none; font-family: Arial, Gotham, 'Helvetica Neue', Helvetica, 'sans-serif'; color: #001588; font-size: 10px; font-weight: bold;" class="address"> P.O. Box 518 ★ 11206 Industrial Parkway Bolivar, Ohio  44612 </a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Office: 330-874-1001 ★ Fax: 330-874-9796 </td>
</tr>
</table> 
</div>
</body>
</html>

这就是它应该的样子enter image description here

这就是它在移动设备上的显示方式

enter image description here

html css 电子邮件 gmail html-email

评论

1赞 AztecCodes 9/21/2023
请提供相关代码。有了您现在提供的这些信息，就无法为您提供帮助。
0赞 K8K 9/21/2023
@AztecCodes帖子已更新。感谢您的帮助。
0赞 AztecCodes 9/21/2023
为什么避免使用 max-width？解决方案将非常容易。
0赞 K8K 9/21/2023
@AztecCodes我不确定我是否完全理解 max-width 或如何在我的情况下使用它，但我现在正在尝试研究它。我还用图片更新了帖子，这样你就可以看到电子邮件在移动设备上的显示方式与它应该是什么样子。如果你能提供更多关于我如何在我的情况下最好地应用它的信息，那就太好了。再次感谢您的帮助和耐心，就像我说的，我是新手。
0赞 Brett Donald 9/21/2023
我不是专家，但这似乎是一个不错的起点。

答：

1赞 AztecCodes 9/21/2023 #1

变化：

  • 我将 #email div 的宽度调整到 95% 左右，在较小的屏幕上提供了一些喘息空间。

  • 我将最大宽度 100% 应用于 responsiveImage 类，以保证图像在较小的显示器上适当调整大小。

  • 我在表格上设置了最大宽度并使用 margin： 0 auto 将它们居中。

修订后的 HTML 文件：

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="format detection" content="telephone=no">
  <meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=Edge" />
  <title>Email template for USA Label Express</title>

  <style type="text/css">
    /* TODO: (previous styles)  */
    /* For mobile screens, use percentage widths and auto margins */
    
    #email {
      width: 95%;
      margin: 0 auto;
    }
    /* Images should scale down on smaller screens */
    
    img.responsiveImage {
      max-width: 100%;
      height: auto;
    }
    /* Use max-width and margin auto for centering */
    
    table {
      max-width: 600px;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <!-- TODO: (rest of your email content)  -->
</body>

</html>

评论

0赞 K8K 9/21/2023
非常感谢，这非常有帮助。我仍在努力解决这个问题，因为它并没有完全解决我的问题。似乎我的大部分问题是我的字体在移动设备上变得太大了。有没有办法设置字体本身的最大大小？
0赞 AztecCodes 9/21/2023
@K8K 不，没有像 max-font-size 这样的直接 CSS 属性。您必须构建一个解决方法。SVG 文本按比例缩放，将是一个很好的尝试。
0赞 A Haworth 9/21/2023
caniemail.com/search/?s=Svg+ 表示某些电子邮件系统（尤其是 Gmail）不支持 SVG。这会导致问题@AztecCodes

上一个：来自 Microsoft 帐户的邮件消息中不存在文本/纯文本

下一个：HTML 电子邮件在 gmail 中无法正确显示