響應式布局是一種網頁設計的方法，它允許網站在不同的設備和屏幕尺寸上呈現最佳的視覺和用戶體驗。響應式布局通常使用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也是一個不錯的選擇。