CSS是前端開發不可或缺的一部分，它可以使網頁布局更加美觀、用戶體驗更佳。今天我們來討論一下CSS在響應式布局中的應用。

響應式布局是指網頁能夠適配不同的屏幕尺寸，在不同的設備上都能夠呈現出最佳的展示效果。當然，屏幕大小的變化會對網頁的布局造成一定的影響。因此，正確使用CSS布局是制作響應式網頁的關鍵。

我們來看一個屏幕大于1200px的情況，下面是一個頁面的布局示意圖：

*-------------------*
|     header        |
*-------------------*
|                   |
|     main          |
|                   |
*-------------------*
|     footer        |
*-------------------*

在屏幕寬度大于1200px的情況下，我們將header、main、footer分別布局在頁面的上中下三個部分。下面是CSS代碼：

header {
height: 100px;
background-color: #ccc;
}
main {
height: 500px;
background-color: #fff;
}
footer {
height: 100px;
background-color: #333;
}

在實際開發中，我們還可以利用@media查詢來根據不同的屏幕尺寸設置不同的樣式，實現更加細粒度的響應式布局。例如，在屏幕寬度小于1200px的情況下，我們可以將header、main、footer的布局合并在一起，實現在手機等小屏幕設備上的最佳展示效果。

CSS的應用非常廣泛，如果想成為一名優秀的前端工程師，精通CSS是不可或缺的一項技能。與此同時，CSS也是一門非常有趣的技術，只要有興趣掌握，定能成為一名操作CSS的巨匠。