CSS響應式設計是指在任何設備上都可以自適應的網頁布局，而不需要針對不同的設備大小使用不同的CSS。實現響應式的關鍵是使用CSS媒體查詢。下面我們將討論如何使用CSS實現響應式布局，同時展示相關的代碼。

首先，需要在HTML文檔中添加一個viewport標簽，以便移動設備可以正確地縮放網頁。如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在CSS中，使用媒體查詢來定義不同設備大小所需要的CSS規則。下面是一個例子：

@media (max-width: 600px) {
body {
background-color: yellow;
}
}

這意味著，在最大寬度為600px的情況下，背景色將變為黃色。假設在寬度為800像素的顯示器上查看頁面，則此規則將不適用。

類似地，我們可以針對不同的設備定義不同的CSS規則。例如，在智能手機和平板電腦上使用以下CSS：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* rules for smartphones and smaller tablets */
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* rules for larger tablets */
}

這里的媒體查詢指定了最小和最大設備寬度，從而為不同的設備定義不同的CSS規則。

總的來說，CSS媒體查詢是實現響應式設計的關鍵。通過使用此功能，可以針對不同的設備，定義出不同的CSS規則，從而實現對于不同設備寬度的自適應性。