一旦屏幕足够小，是什么因素迫使我的宽度固定？

Question

我想弄清楚为什么我的 HTML 电子邮件会这样：

我觉得我已经让它具有响应性（在支持媒体查询的浏览器和电子邮件客户端上），因为我在所有地方都用基于百分比的宽度替换了固定宽度。 None 的 cells/tables 宽度加起来超过 400 像素，但它卡在那里。有人愿意帮我找出罪魁祸首吗？是哪个元素造成了问题？

Fiddle：https://jsfiddle.net/j7y75g7t/。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            [class="width-100-pct"] { width: 100% !important; }
            @media (max-width: 600px) {
                h1, h2, p { text-align: center !important; }
                img[class="responsive-image"] { width: 100% !important; height: auto !important; }
                [class="width-100-pct-on-mobile"] { width: 100% !important; }
                [class="width-75-pct-on-mobile"] { width: 75% !important; }
                [class="width-third-on-mobile"] { width: 33.33333% !important;}
                [class="width-25-pct-on-mobile"] { width: 25% !important; }
                [id="prequal-btn"] { width: 50% !important; height: auto !important; }
            }
        </style>
    </head>
    <body style="margin:0;">
        <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td bgcolor="#F1F1F3" style="width:100%;">
                    <!-- TOP BLUE STRIP -->
                    <table cellpadding="0" cellpadding="0" border="0" class="width-100-pct-on-mobile">
                        <tr>
                            <td bgcolor="#1B5D9B" style="width:100%;">
                                <table cellpadding="10" cellspacing="0" border="0">
                                    <tr>
                                        <td width="605" class="width-75-pct-on-mobile">

                                        </td>
                                        <td width="195" style="text-align:right; padding: 10px;" class="width-25-pct-on-mobile">
                                            <img width="175" height="70" src="http://i.imgur.com/4O8j7xp.png?1" style="width:175px;height:70px;border:0;margin:0;outline:0;" class="responsive-image"/>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!-- CONTAINED BODY -->
                    <table align="center" cellpadding="0" cellpadding="10" border="0" width="600" class="width-100-pct-on-mobile">
                        <!-- HEADLINE ROW -->
                        <tr>
                            <td style='font-size: 22pt; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000; text-align:center; text-transform:uppercase;padding-top:20px;padding-bottom:20px;'>
                                <h1 style='font-size: 22pt; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000; text-align:center; text-transform:uppercase;margin:0;'>HEADLINE</h1>
                            </td>
                        </tr>
                        <!-- IMAGE-HEADLINE-SUBTEXT ROW -->
                        <tr>
                            <td width="600" bgcolor="#FFFFFF" style='padding:10px; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000;border-radius:10px;' class="width-100-pct-on-mobile">
                                <p><img src="http://i.imgur.com/8LX3Chz.png" width="580" height="145" style="width:580px;height:145px;border:0;margin:0;outline:0;" class="responsive-image"/></p>
                                <h2 style='font-size: 18pt; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000; text-transform:uppercase;margin-bottom:5px;'>SUBHEADLINE</h2>
                                <p style='font-size: 10pt; line-height: 11pt; font-family: sans-serif, Arial; color: #000; font-weight:600;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                                <p style="text-align:right;" class="orange-button-holder"><a href="http://guidantfinancial.com" style="text-decoration:none;"><img src="http://i.imgur.com/DJmCHC4.png?1" width="107" height="27" style="width:107px;height:27px;border:0;margin:0;outline:0;"/></a></p>
                            </td>
                        </tr>
                        <!-- EMPTY SPACE ROW -->
                        <tr>
                            <td width="600" style="width:600px;padding-top:10px;padding-bottom:10px;" class="width-100-pct-on-mobile">

                            </td>
                        </tr>
                        <!-- IMAGE-HEADLINE-SUBTEXT ROW -->
                        <tr>
                            <td width="600" bgcolor="#FFFFFF" style='padding:10px; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000;border-radius:10px;' class="width-100-pct-on-mobile">
                                <p><img src="http://i.imgur.com/1Ye4ktl.png" width="580" height="291" style="width:580px;height:291px;border:0;margin:0;outline:0;" class="responsive-image"/></p>
                                <h2 style='font-size: 18pt; font-family:"Arial Black", Gadget, sans-serif, Arial; color: #000; text-transform:uppercase;margin-bottom:5px;'>SUBHEADLINE</h2>
                                <p style='font-size: 10pt; line-height: 11pt; font-family: sans-serif, Arial; color: #000; font-weight:600;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                                <p style="text-align:right;" class="orange-button-holder" ><a href="http://guidantfinancial.com" style="text-decoration:none;"><img src="http://i.imgur.com/DJmCHC4.png?1" width="107" height="27" style="width:107px;height:27px;border:0;margin:0;outline:0;"/></a></p>
                            </td>
                        </tr>
                        <!-- PREQUALIFY BUTTON ROW -->
                        <tr>
                            <td width="600" style="padding-top: 20px; padding-bottom: 20px; text-align:center;" class="width-100-pct-on-mobile">
                                <p style="margin:0; text-align:center;"><a href="https://www.guidantfinancial.com/pre-qual/business-funding" style="text-decoration:none;"><img src="http://i.imgur.com/q6hpze5.png?1" width="288" height="55" style="width:288px;height:55px;border:0;margin:0;outline:0;" id="prequal-btn"/></a></p>
                            </td>
                        </tr>
                        <!-- AWARD LOGOS -->
                        <tr>
                            <td width="600" bgcolor="#FFFFFF" style="padding:10px; border-radius:10px;" class="width-100-pct-on-mobile">
                                <table cellpadding="0" cellspacing="0" border="0" class="width-100-pct">
                                    <tr>
                                        <td valign="middle" width="200" style="text-align:center;" class="width-third-on-mobile">
                                            <img src="http://i.imgur.com/5OqBS39.png" width="36" height="63" style="width:36px;height:63px;border:0;margin:0;outline:0;"/>
                                        </td>
                                        <td valign="middle" width="200" style="text-align:center;" class="width-third-on-mobile">
                                            <img src="http://i.imgur.com/EwNyPSW.png" width="64" height="63" style="width:64px;height:63px;border:0;margin:0;outline:0;"/>
                                        </td>                                       
                                        <td valign="middle" width="200" style="text-align:center;" class="width-third-on-mobile">
                                            <img src="http://i.imgur.com/wZjpm07.png" width="89" height="63" style="width:89px;height:63px;border:0;margin:0;outline:0;"/>
                                        </td>                                       
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <!-- PHONE NUMBER -->
                        <tr>
                            <td width="600" style="padding-top:20px;padding-bottom:20px;" class="width-100-pct-on-mobile">
                                <p style='text-align:left;font-family:Georgia,"Times New Roman",Times,serif;color:#939598;margin:0;font-weight:bold;'>The Guidant Team</p>
                                <p style='text-align:left;font-family:Georgia,"Times New Roman",Times,serif;margin:0;font-weight:bold;'><a href="tel:888-472-4455" style='color:#1e70b8;text-decoration:underline;font-family:Georgia,"Times New Roman",Times,serif;font-weight:bold;'>888.472.4455</a></p>
                            </td>
                        </tr>
                        <!-- Disclaimer -->
                        <tr>
                            <td width="600" style="padding:20px 100px;text-align:center;font-family: sans-serif, Arial; font-size: 9pt; color:#000;font-weight:bold;" class="width-100-pct-on-mobile">
                                <p style="text-align:center;font-family: sans-serif, Arial; font-size: 9pt; color:#000; margin:0; font-weight:bold;">Guidant Financial | 1100 112th Ave NE Ste 100 | Bellevue, WA 98004</p>
                                <p style="text-align:center;font-family: sans-serif, Arial; font-size: 9pt; color:#000; margin:0; font-weight:bold;">This email was sent by MitchellLarsen@guidantfinancial.com. If you no longer want to receive these emails you may unsubscribe at any time.</p>
                            </td>
                        </td>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

Answer 1

您应该首先清理代码并创建一个单独的 CSS 文件并在其中定义类及其样式。

然后：您将几个宽度属性分配给相互重叠/覆盖的元素，然后使用“！重要”强制覆盖。

<table align="center" cellpadding="0" cellpadding="10" border="0" width="600" class="width-100-pct-on-mobile">

一直用“!important”覆盖参数是不好的做法。

这样做的一个想法是将所有内容都放在一个具有 100% 和填充的容器元素中。然后卡片可以是 100% 宽度和居中，然后它们将完全响应。

要记住的一件重要事情是，当您想要将具有未知（百分比）大小的浮动响应元素居中时，您必须创建环绕 "helper" 元素，例如：

.centerWrapper {
  float: right;
  position: relative;
  left: -50%;  
}

.container {
  position: relative;
  left: 50%;
  max-width: 600px;
  text-align: center;
}

.card {
  max-width: 100%;
  display: inline-block;
}

然后是HTML

<div class="centerWrapper">
   <div class="container">
      <div class="card">...</div>
   </div>
</div>

我为你做了一个fiddle，非常粗略地显示了这一点。它显示了基于百分比的流畅/响应式布局，无需媒体查询断点。您仍然可以添加@media 断点，例如更改font-sizes。

https://jsfiddle.net/yphfgx51/2/

一旦屏幕足够小，是什么因素迫使我的宽度固定？

What element is forcing my width to be fixed once the screen is small enough?

html

css

html-email

media-queries

responsive-design