CSS是前端開發中非常重要的一部分，它可以通過一些簡單的代碼實現網頁的美化效果，同時也可以用來滿足響應式效果。當用戶在不同尺寸的屏幕上訪問同一個網站時，網站的布局和排版會發生變化，這就是響應式效果。

為了讓網頁在不同屏幕上呈現出不同的布局，我們需要使用CSS Media Query。這個功能可以讓我們根據不同的屏幕尺寸來加載不同的CSS樣式，從而實現響應式網頁。

/* 當屏幕寬度小于等于768px時，應用以下CSS樣式 */
@media only screen and (max-width: 768px) {
body {
font-size: 16px;
}
.container {
width: 100%;
}
}
/* 當屏幕寬度大于768px且小于等于1200px時，應用以下CSS樣式 */
@media only screen and (min-width: 769px) and (max-width: 1200px) {
body {
font-size: 18px;
}
.container {
width: 90%;
}
}
/* 當屏幕寬度大于1200px時，應用以下CSS樣式 */
@media only screen and (min-width: 1201px) {
body {
font-size: 20px;
}
.container {
width: 80%;
}
}

上面的代碼展示了如何使用CSS Media Query來滿足響應式效果。我們首先根據屏幕寬度設置不同的CSS樣式，在小屏幕上設置字體大小為16px，容器寬度為100%；在中等屏幕上設置字體大小為18px，容器寬度為90%；在大屏幕上設置字體大小為20px，容器寬度為80%。

總的來說，CSS在實現響應式效果方面起到了重要的作用，我們可以通過合理地運用CSS Media Query，針對不同的屏幕尺寸編寫不同的CSS樣式，從而實現一個適配不同屏幕的響應式網頁。