html - 如何将最大宽度的 div 居中，如果窗口小于 div，则 div 的每一侧仍会有一些边距空间？

Question

我有一个具有最大宽度且居中的 div:

.div1 {
    background-color: #eee;
    max-width: 600px;
    margin: auto;
}

div 会自动居中，但如果窗口小于 600px，我希望它的左右两侧也有 20px 的边距。

这是我要完成的 JSFiddle:FIDDLE .我想将 div2 的属性添加到 div1，而不失去居中 div1 的能力。

Answer 1

使用媒体查询来指定何时覆盖边距并在每边给它们 20 像素。

CSS:

.div1 {
    background-color: #eee;
    max-width: 600px;
    margin: 0 auto;
} 

@media screen and (max-width: 640px) {
    .div1 {
        margin-left: 20px;
        margin-right: 20px;
    }
}