如今人們越來越依賴移動設備，因此網站需要能夠適應不同設備屏幕大小和分辨率的需求。但是，傳統的網站布局使用固定單位像素（px）進行定義，無法適應不同設備的屏幕大小，導致網站縮放或在小屏幕設備上顯示不全。因此，我們需要一種可以適應不同設備屏幕的網站布局實現方式。

這時，響應式設計應運而生。響應式網站設計是一種針對不同設備屏幕而采用的網頁設計方法，它可以通過檢測用戶所使用的設備分辨率來自適應地調整頁面布局和樣式。而使用 CSS 實現響應式網站設計可以讓你的網站適應更多不同的設備、瀏覽器和用戶。

CSS 媒體查詢是實現響應式網站設計的關鍵之一。它是一種在 CSS 中定義特定條件下的樣式表規則。通過使用媒體查詢，可以告訴瀏覽器加載特定的 CSS 代碼，以適應不同的設備和屏幕尺寸。下面是一個使用媒體查詢定義網站寬度的示例：

@media only screen and (max-width: 768px) {
/* 移動設備樣式 */
body {
font-size: 16px;
margin: 0;
padding: 0;
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
/* 平板設備樣式 */
body {
font-size: 18px;
margin: 0;
padding: 0;
}
}
@media only screen and (min-width: 1025px) {
/* 桌面設備樣式 */
body {
font-size: 20px;
margin: 0 auto;
width: 960px;
}
}

以上 CSS 代碼通過媒體查詢設置了不同屏幕尺寸下的樣式。通過這種方式，我們可以使用一套 CSS 代碼適配所有設備，從而打造出更加優美、高效的網站體驗。