CSS中的container公共类在网页设计中是非常常见的，它由一组CSS代码组成，用于对网页的布局进行控制。在这篇文章中，我们将详细介绍container公共类，以及如何使用它来实现网页布局的响应式设计。

.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

container公共类的主要作用是将内容居中对齐，并使其在不同设备上以响应式的方式显示。其中，width属性设置为100%，使其自适应于不同的屏幕尺寸。padding-right和padding-left属性用于设置内边距，确保内容与浏览器窗口之间的距离始终一致。margin-right和margin-left属性用于设置外边距，将内容在水平方向上居中对齐。

为了确保内容在不同设备上以响应式的方式显示，我们可以在.container类之上添加媒体查询。例如：

@media (min-width: 768px) {
.container {
max-width: 750px;
}
}
@media (min-width: 992px) {
.container {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}

上述代码中，我们使用了三个媒体查询来设置响应式设计。当设备宽度大于或等于768px时，容器的最大宽度为750px；当设备宽度大于或等于992px时，容器的最大宽度为970px；当设备宽度大于或等于1200px时，容器的最大宽度为1170px。

通过使用container公共类，我们可以快速、方便地实现网页布局的响应式设计。无论在哪种设备上访问网站，我们都可以通过这个类将内容居中对齐，并使其以一种美观、一致的方式显示。