CSS響應式設計是一種通過編寫特定的CSS樣式來適應不同屏幕尺寸的設計技術。這種設計技術可以讓我們的網頁在不同的設備上（如臺式機、筆記本電腦、平板電腦和手機）擁有更好的顯示效果。

@media screen and (min-width: 768px) {
/* 在屏幕寬度大于等于768px時執行這些CSS代碼 */
.main-container {
width: 80%; /* 改變容器寬度為80% */
margin: 0 auto; /* 水平居中 */
}
}
@media screen and (max-width: 767px) {
/* 在屏幕寬度小于768px時執行這些CSS代碼 */
.main-container {
width: 100%; /* 容器寬度改為100% */
padding: 20px; /* 添加10像素的內間距 */
}
}

在代碼中，我們使用了@media查詢來檢測屏幕尺寸，并根據不同的屏幕寬度應用不同的CSS樣式。例如，當屏幕寬度大于等于768像素時，我們將.main-container的容器寬度設置為80%。當屏幕寬度小于768像素時，我們將容器寬度設置為100%。

CSS響應式設計能夠幫助我們提高網站的可用性和用戶體驗，因為它可以讓我們將網頁元素進行適當的調整，以便適應不同的設備。通過使用這種技術，我們可以在所有的設備上提供良好的用戶體驗，從而提升我們網站的整體價值。