CSS是前端開發過程中不可或缺的一部分，而響應式設計是目前前端開發趨勢。下面我們來了解一下如何用CSS制作響應式網頁。

1.使用媒體查詢

@media screen and (min-width: 600px) {
body {
background-color: lightblue;
}
}

媒體查詢可以根據不同的屏幕尺寸應用不同的CSS樣式，如上述代碼，當屏幕寬度大于等于600像素時，背景色變為淡藍色。

2.使用百分比布局

.container {
width: 90%;
margin: 0 auto;
}
.box {
width: 45%;
float: left;
margin: 1%;
}

在設定元素寬度時，使用百分比而不是具體寬度值可以使元素按比例縮放。如上述代碼，在.container中設定了寬度為90%，.box中設定寬度為45%，并使用浮動和margin實現了兩列自適應布局。

3.使用Flexbox布局

.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex: 1 1 200px;
margin: 10px;
}

Flexbox是一種現代的布局方式，可以輕松實現響應式布局。如上述代碼，.container利用display:flex將子元素排列為一排并自動換行，.box使用flex屬性實現自動增長、收縮和固定寬度，并使用margin實現間距效果。

總之，以上三種方法都可以實現響應式設計。需要根據具體情況選擇使用哪種方法，或者結合使用來達到最佳效果。