html - 电子邮件模板 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