CSS自適應(yīng)網(wǎng)站設(shè)計(jì)是指通過(guò)CSS樣式表語(yǔ)言來(lái)實(shí)現(xiàn)頁(yè)面元素的自適應(yīng)調(diào)整，以適應(yīng)不同分辨率的屏幕設(shè)備。

/*設(shè)置一個(gè)基礎(chǔ)字體大小*/
html {font-size:16px;}
/*媒體查詢(xún)，根據(jù)屏幕寬度調(diào)整字體大小*/
@media screen and (max-width: 768px) {
html {font-size: 14px;}
}
@media screen and (max-width: 425px) {
html {font-size: 12px;}
}

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

/*設(shè)置一個(gè)自適應(yīng)寬度的容器，寬度為屏幕寬度的80%*/
.container {
width: 80%;
max-width: 1200px; /*設(shè)置一個(gè)最大寬度，避免內(nèi)容過(guò)于寬大屏幕出現(xiàn)滾動(dòng)條*/
margin: 0 auto; /*水平居中*/
}
/*在媒體查詢(xún)中，調(diào)整容器寬度*/
@media screen and (max-width: 768px) {
.container {width: 90%;}
}
@media screen and (max-width: 425px) {
.container {width: 100%;}
}

另外，還可以使用Flex布局和Grid布局來(lái)實(shí)現(xiàn)頁(yè)面元素的自適應(yīng)排列，同時(shí)配合媒體查詢(xún)調(diào)整顯示效果。

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