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

Question

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

我不能在结构上做大的改变。

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

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

Thanks in advance

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>