CSS自適應網站設計是指通過CSS樣式表語言來實現頁面元素的自適應調整，以適應不同分辨率的屏幕設備。

/*設置一個基礎字體大小*/
html {font-size:16px;}
/*媒體查詢，根據屏幕寬度調整字體大小*/
@media screen and (max-width: 768px) {
html {font-size: 14px;}
}
@media screen and (max-width: 425px) {
html {font-size: 12px;}
}

除了字體大小的自適應外，還可以通過設置元素寬度、高度和外邊距等樣式屬性，使頁面在不同屏幕分辨率下呈現不同的布局。

/*設置一個自適應寬度的容器，寬度為屏幕寬度的80%*/
.container {
width: 80%;
max-width: 1200px; /*設置一個最大寬度，避免內容過于寬大屏幕出現滾動條*/
margin: 0 auto; /*水平居中*/
}
/*在媒體查詢中，調整容器寬度*/
@media screen and (max-width: 768px) {
.container {width: 90%;}
}
@media screen and (max-width: 425px) {
.container {width: 100%;}
}

另外，還可以使用Flex布局和Grid布局來實現頁面元素的自適應排列，同時配合媒體查詢調整顯示效果。

/*使用Flex布局*/
.container {
display: flex;
flex-wrap: wrap; /*超出容器寬度后自動換行*/
justify-content: space-between; /*在主軸上均勻分布元素*/
}
/*使用Grid布局*/
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));/*自動填充，每列最小300px寬度，平分剩余寬度*/
}