CSS是網頁設計中非常重要的一部分，它能夠控制網頁的樣式和布局。如何讓網頁在不同的設備和屏幕上都可以完美顯示呢？這就需要使用CSS制作響應式網頁。

CSS的響應式設計是指根據不同的屏幕大小，自動適應調整網頁的布局和樣式，使其在不同設備上都能夠有更好的用戶體驗。下面是一些CSS實現響應式設計的技巧：

/* 1. 使用@meadia查詢 */
@media screen and (max-width: 768px) {
/* 樣式代碼 */
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* 樣式代碼 */
}
@media screen and (min-width: 1025px) {
/* 樣式代碼 */
}

@media查詢可以根據不同的屏幕大小設置不同的樣式。上面的代碼表示當屏幕寬度小于等于768px時，應用第一個樣式；當寬度在769px到1024px之間時，應用第二個樣式；當寬度大于等于1025px時，使用第三個樣式。

/* 2. 相對長度單位 */
.container {
width: 80%;
margin: 0 auto;
max-width: 1200px;
}
.box {
width: 100%;
padding: 20px;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.container {
width: 90%;
}
}

使用相對長度單位可以使布局更具彈性。上面的代碼表示.container的寬度為父容器寬度的80%，且最大寬度為1200px。.box的寬度為100%，且為了避免padding和border撐開元素，設置box-sizing為border-box。使用@media查詢在屏幕寬度大于等于768px時，將.container的寬度調整為90%。

/* 3. 顯示和隱藏元素 */
.hidden-sm {
display: none;
}
@media screen and (max-width: 768px) {
.hidden-sm {
display: block;
}
.hidden-lg {
display: none;
}
}
@media screen and (min-width: 769px) {
.hidden-sm {
display: none;
}
.hidden-lg {
display: block;
}
}

有時需要在某個屏幕大小下隱藏或顯示某些元素。上面的代碼使用display屬性來控制元素的顯示和隱藏，通過@media查詢實現了在不同屏幕大小下的不同顯示效果。

這些技巧只是CSS響應式設計的冰山一角，還有很多功能和工具可以幫助我們創建出更好的響應式網頁。在實際操作中，需要根據具體業務需求和目標受眾，選擇合適的技術和方法來實現最佳效果。