Html 电子邮件模板div宽度未随响应媒体查询而更改

我有一个动态生成的电子邮件模板，我想让它响应

我不能在结构上做重大改变

这是我的演示模板链接：

请告诉我如何解决这个问题

提前感谢

尝试删除

    <style type='text/css'>
    @media only screen and (max-device-width:450px) {
        div[class=contentdiv] {
            width: 450px !important;
        }
    }
    .contentdiv{width:500px}
</style>

@仅介质屏幕和（最大设备宽度：450px）{
div[class=contentdiv]{
宽度：450px！重要；
}
}
.contentdiv{宽度：500px}

您需要使用媒体查询。当浏览器小于某个宽度时，请更改一些css

像这样：

CSS

@media all and (max-width: 550px) // Change css when page's width is smaller than 550px
{
    .contentdiv {
        width: 100%; //change the container's width
    }

    table {
        width: 100%; // Make it the width of the container's size
    }
}

---

JSBIN:

如果您要的是手机和平板电脑，那么您可以在css中使用@media查询语法，而不是使用内联css，如@media（最小宽度：481px）和（最大宽度：850px）{//在此处写入css属性}，481px和850px的大小表示设备屏幕的宽度