一旦屏幕足够小，什么元素会强制我的宽度固定？答案

【问题标题】：What element is forcing my width to be fixed once the screen is small enough?一旦屏幕足够小，什么元素会强制我的宽度固定？
【发布时间】：2016-01-26 07:43:50
【问题描述】：

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

我觉得我已经让它响应了（在支持媒体查询的浏览器和电子邮件客户端上），因为我已经用基于百分比的宽度替换了固定宽度。里面的单元格/表格的宽度加起来都不超过 400 像素，但它仍然卡在那里。有人想帮我找出罪魁祸首吗？哪个元素导致了问题？

小提琴：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>

【问题讨论】：

您能具体说明一下这个问题吗？您在哪个电子邮件客户端看到此问题？

标签： html css responsive-design media-queries html-email

【解决方案1】：

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

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

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

总是用“！important”覆盖参数是不好的做法。

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

要记住的重要一点是，当您想将未知（百分比）大小的浮动响应式元素居中时，您必须创建包装“帮助”元素，如下所示：

.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>

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

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

【讨论】：

我知道你提到的一切。我不能这样做的原因是因为我正在编写 HTML 电子邮件，而电子邮件客户端仅支持最少的属性。
对不起，我似乎误解了你的问题。所以，这根本就没有帮助吗？我应该删除吗？