小编Mar*_*son的帖子

响应式电子邮件模板中的媒体查询

我需要构建一个响应式电子邮件模板。我进行了研究，得知电子邮件客户端并未广泛支持媒体查询。

因此，我尝试不使用媒体查询，而是使用来堆积列display: inline-block; max-width:290px;。

但是，如果我想更改移动版本的字体大小怎么办？另外，我有一种情况，客户希望在移动设备上看到几个块，而在桌面上看不到。没有媒体查询，如何实现这些目标？
另外，在我添加样式规则和媒体查询的情况下，我猜想iOS支持媒体查询。但是媒体查询下的规则没有出现，但是其他规则在<style></style>工作中定义得很好。

模板看起来像这样：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
   table {
       font-size: 24px;
   }
   #tdtoshowinmobile {
       display: none;
   }
   @media only screen and max-device-width(767px){
       table {
           font-size: 32px !important;
       }
       #tdtoshowinmobile {
           display: block !important;
       }
   }
</style>
</head>

<body>


    <table>
        ...tr...td....
    </table>
</body>

Run Code Online (Sandbox Code Playgroud)

上面的模板向内联元素添加了常规规则，但就我而言，删除了媒体查询。我读了一篇文章，说邮件客户端删除样式标签并将其添加到内联元素中。而且我猜想由于媒体查询无法内联定义，因此它们被忽略了。

所以，我的问题再次是：