如何在没有媒体查询的情况下响应式调整 3 个按钮的大小

Question

我在一封电子邮件中连续有 3 个按钮。当在移动屏幕上查看时，它们会按照下图被压扁。

有人可以帮助我如何调整这些大小以便在移动屏幕上以“正常”方式阅读而无需媒体查询（这是一封电子邮件，所以我的所有样式都是在线的）。

任何解决方案都可以 - 只要措辞不会被压扁。

<tbody style="padding-top:10px">
  <tr style="border-collapse:collapse">
    <td valign="top" align="center" style="border-collapse:collapse;padding:5px 0">

      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;border-spacing:33px 2px">
        <tbody>
          <tr style="border-collapse:collapse">
            <td bgcolor="#fae231" valign="top" align="center" style="border-collapse:collapse;padding:13px 17px;border-radius:8px;background-color:#fae231">
              <a href="https://fluf.io/profile/?testaccountgt/orders/view-order/7501" style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616" target="_blank"
                data-saferedirecturl="https://www.google.com/url?q=https://fluf.io/profile/?testaccountgt/orders/view-order/7501&amp;source=gmail&amp;ust=1646256195425000&amp;usg=AOvVaw3u-T-1Gq8L6jxeAo388tcD">View order</a>
            </td>
            <td bgcolor="#fae231" valign="top" align="center" style="border-collapse:collapse;padding:13px 17px;border-radius:8px;background-color:#fae231">
              <a style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616">Track order</a>
            </td>
            <td bgcolor="#fae231" valign="top" align="center" style="border-collapse:collapse;padding:13px 17px;border-radius:8px;background-color:#fae231">
              <a href="https://fluf.io/outlets//reviews/" style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://fluf.io/outlets//reviews/&amp;source=gmail&amp;ust=1646256195425000&amp;usg=AOvVaw2n8CPAJtw95Aum6KO_PqNR">Submit a Review</a>
            </td>

          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</tbody>

Code as Fiddle

Answer 1

如果您使用 table，则没有响应方式，因为如果宽度不够，table 将不会分成 elss 列。您可以做的一件事是将 display:block; 更改为 display:inline-block。然后使用 white-space: nowrap 来防止按钮内出现换行符：

<a href="https://fluf.io/profile/?testaccountgt/orders/view-order/7501" style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:inline-block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616;padding:13px 17px;border-radius:8px;background-color:#fae231;white-space:nowrap;" target="_blank"
  data-saferedirecturl="https://www.google.com/url?q=https://fluf.io/profile/?testaccountgt/orders/view-order/7501&amp;source=gmail&amp;ust=1646256195425000&amp;usg=AOvVaw3u-T-1Gq8L6jxeAo388tcD">View order</a>

<a style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:inline-block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616;padding:13px 17px;border-radius:8px;background-color:#fae231;white-space:nowrap;">Track order</a>

<a href="https://fluf.io/outlets//reviews/" style="line-height:1.5;text-decoration:none;word-break:break-word;font-weight:500;display:inline-block;font-family:'Fira Sans',Helvetica,Arial,sans-serif;font-size:16px;color:#161616;padding:13px 17px;border-radius:8px;background-color:#fae231;white-space:nowrap;" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://fluf.io/outlets//reviews/&amp;source=gmail&amp;ust=1646256195425000&amp;usg=AOvVaw2n8CPAJtw95Aum6KO_PqNR">Submit a Review</a>

Answer 2

最后听从了@Nathan 的建议，选择在 table 数据元素上使用 display:table 行堆叠 table。

但不确定如何将其切换为桌面为 1 行而移动设备为 3（在没有媒体查询的情况下 - 再次给出，这是一封电子邮件）。刚跑了 3 排，还不错。

如何在没有媒体查询的情况下响应式调整 3 个按钮的大小

How to size 3 buttons responsively without media queries

html

css

responsive-design

html-email

email-templates