Question

我的@media查询遇到了问题。当我调整浏览器（chrome）的大小时，它不会缩小。我现在尝试了几种解决方案，无法让它发挥作用。我确定这是一个简单的用户错误，但是从我读过的不同文章和博客看来，这似乎是合乎逻辑的解决方案，应该可行。

<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body-table">
          <tbody>
            <tr align="center">
              <td width="100%" class="container" bgcolor="#ffffff" height="100">

媒体查询：

@media screen and (max-width: 600px){
        *[class="container"] { width:100% !important;}

}

Answer 1

我认为问题是你的桌子有一个固定的宽度。因此，请尝试将固定宽度更改为百分比。喜欢这个

class Team {
        //fields contain:
        ArrayList<Player> players;
        public Team clone() {
           Team team = new Team();
           team.players.addAll(players);
           return team;
        }
    }

// ...

    Team[] deepCloneTeams(Team[] teams) {
        Team[] newTeams = new Team[teams.length];
        for (int i = 0; i < teams.length; i++)
            newTeams[i] = teams[i].clone();
        return newTeams;
    }

Answer 2

将

width="600"

更改为

width="50%"

Answer 3

您的.container表没有缩小，因为它的父级是固定宽度。因此，我们将为保留主表的td添加宽度，而不是固定宽度父级。

<table border="1" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="600">
            <table class="container" width="100%" style="background: peru;">
                <tr>
                    <td>This will shrink when width less than 600 pixels.</td>
                </tr>
            </table>
        </td>
         <td></td>
     </tr>
</table>

您可以找到更详细的答案here或此笔here，我强烈建议您查看此guide以查看每个电子邮件客户端支持哪种CSS样式。

调整浏览器大小时，响应式电子邮件媒体查询不起作用

3 个答案: