javascript - 如何根据屏幕尺寸更改我的表格？

Question

我想更改我的表格，使其在移动平台上看起来更漂亮。我想要做的就是更改我的表，使其成为两列。我正在使用此代码发送电子邮件。所以我无法将样式表链接到我的 html。建议我使用内联样式。是否可以使用 javascript 完成此操作？

这是我尝试过的:

<script>
    $(document).ready(function() {
    if ($(window).width() < 1024) {
        <table align="center">
            <tr>
                <td style="vertical-align: top;">Property:</td>
                <td style="padding-left: 10px; font-weight: bold; width: 300px;">115 EAST 9TH STREET<br>NEW YORK, NY, 10003</td>
            </tr>
            <tr>
                <td style="vertical-align: top;">Resident Name:</td>
                <td style="padding-left: 10px; font-weight: bold; width: 300px; vertical-align: top;">MAILBOXES ETC.</td>
            </tr>
            <tr>
                <td style="">Unit:</td>
                <td style="padding-left: 10px; font-weight: bold;">STORE</td>
            </tr>
            <tr>
                <td style="">Account #:</td>
                <td style="padding-left: 10px; font-weight: bold;">xxx-xxx</td>
            </tr>
        </table>
    } else {
        <table align="center">
            <tr>
                <td style="vertical-align: top;">Resident Name:</td>
                <td style="padding-left: 10px; font-weight: bold; width: 300px; vertical-align: top;">MAILBOXES ETC.</td>
                <td style="vertical-align: top;">Property:</td>
                <td style="padding-left: 10px; font-weight: bold; width: 300px;">115 EAST 9TH STREET<br>NEW YORK, NY, 10003</td>
             </tr>
             <tr>
                  <td style="">Unit:</td>
                  <td style="padding-left: 10px; font-weight: bold;">STORE</td>
             </tr>
             <tr>
                 <td style="">Account #:</td>
                 <td style="padding-left: 10px; font-weight: bold;">xxx-xxx</td>
             </tr>
         </table>
       }});
 </script>

任何帮助将不胜感激。

Answer 1

不，绝对不要使用 Javascript 发送电子邮件，因为大多数客户端完全禁用它。

即使您只为网络浏览器设计表格，您也根本不需要 Javascript。好好应用，你所有的问题都能得到解决media queries ，如果您想花一点时间进一步阅读该主题。毫无疑问，这是值得的。

对于电子邮件，我建议阅读 this awesome article about using media queries for emails .一个巨大的缺点是缺乏 Gmail 的支持(作者在文末指出)。如果必须覆盖 Gmail 用户，那么据我所知，您必须坚持最基本的响应做法，例如使用 em 和/或 % width、height、padding、margin 等单位，而不是 px CSS 样式。