CSS中的自適應設計是指使用CSS的技巧，使得網站能夠在不同的屏幕大小和設備上呈現出合適的樣式和布局。下面就介紹幾種使用CSS實現自適應設計的方法。

/*方法一：使用百分比*/
.container{
width: 80%;
}
/*方法二：使用max-width*/
.container{
max-width: 1200px;
width: 100%;
}
/*方法三：使用@media查詢和rem*/
@media only screen and (max-width: 760px){
html{
font-size: 16px;
}
}
.box{
width: 10rem;
}
/*方法四：使用flex布局*/
.container{
display: flex;
flex-wrap: wrap;
}
.item{
flex-basis: calc(25% - 20px);
margin: 10px;
}

其中，方法一是使用百分比設置元素的寬度。這樣，元素的寬度會隨著父元素的寬度而變化。例如，設置.container的寬度為80%，則在一個寬度為1000px的容器內，.container的寬度會為800px。

方法二是使用max-width設置元素的最大寬度。這樣，元素的寬度會隨著屏幕寬度的縮小而減小，但不會小于設置的最大寬度。例如，設置.container的max-width為1200px，width為100%，則在一個寬度為1000px的容器內，.container的寬度會為1000px，在一個寬度為1400px的容器內，.container的寬度會為1200px。

方法三是使用@media查詢和rem實現響應式字體和布局。這里的@media查詢是根據屏幕寬度對字體大小和元素寬度進行調整，而rem是相對于根元素的字體大小單位。例如，設置當屏幕寬度小于760px時，html的字體大小為16px，.box的寬度為10rem。則當屏幕寬度小于760px時，.box的寬度為屏幕寬度/16*10。

方法四是使用flex布局實現自適應布局。這里的flex-basis是指每個flex項目最初的大小，可以使用calc函數結合百分比和像素值進行計算。這樣，當屏幕寬度變化時，.item的寬度也會相應調整。