在调整broswer窗口大小时自动减小容器宽度

Question

我正在使用CSS和HTML尝试重现此网站http://www.newsweek.com/的主页作为练习。

如果您打开带有大屏幕的页面，您会在两侧看到两个空列，随着broswer宽度的减小，这些列会逐渐减少。

我想重现这种行为但不能直到最后：我设置了一个初始宽度为80％的容器类，由于CSS中的媒体查询，它在某些时候变为100％：

@media screen and (max-width: 1047px) {
    .container {
    width:100%;}}

我想念的是这个容器的逐渐减少。如何制作？

非常感谢

Answer 1

对于这样的体验，你需要的就是这样：

.container {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

如果.container应用于块级元素（如<div>），则此元素自然会尽可能宽。这只是说不要超过1200px，并在左右之间平均指定左侧空间。

如果由于某种原因该元素不是块级别（例如<span>），则只需将display: block;添加到上面的代码中即可使其成为块级别。