电子邮件模板div宽度不随响应式媒体查询而变化

Question

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

我无法对结构进行重大改变。

这是我的演示模板链接：http://jsbin.com/weyemida/1/watch

请告诉我们如何解决此问题。

提前致谢

Answer 1

您需要使用媒体查询。当您的浏览器小于某个宽度时，请更改一些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： http://jsbin.com/bijixiga/1/edit

Answer 2

尝试删除

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