响应式布局是一种网页设计的方法，它允许网站在不同的设备和屏幕尺寸上呈现最佳的视觉和用户体验。响应式布局通常使用CSS media queries来实现，它可以根据设备的屏幕大小和方向来应用不同的样式。

/* 响应式布局样式 */
@media screen and (max-width: 992px) {
/* 屏幕宽度小于等于 992px 时应用的样式 */
.container {
width: 100%;
}
}
@media screen and (max-width: 768px) {
/* 屏幕宽度小于等于 768px 时应用的样式 */
.header {
font-size: 20px;
}
.navigation {
visibility: hidden;
}
}
@media screen and (max-width: 480px) {
/* 屏幕宽度小于等于 480px 时应用的样式 */
.header {
font-size: 18px;
}
.navigation {
display: none;
}
}

以上代码是一个基本的响应式布局样式，它使用@media规则和max-width属性来确定不同屏幕大小下应用的样式。例如，当屏幕宽度小于等于992px时，容器的宽度将变为100%。

在编写响应式布局的CSS时，要考虑到不同设备和浏览器的兼容性，以及不同屏幕尺寸的排版和布局。为了方便调试和修改样式，使用预处理器如SASS或LESS也是一个不错的选择。