CSS 自適應(yīng)屏幕尺寸是一種響應(yīng)式設(shè)計(jì)，能夠?yàn)椴煌聊怀叽绲脑O(shè)備提供適當(dāng)?shù)娘L(fēng)格和布局。此外，自適應(yīng)布局也有助于提高網(wǎng)站的可用性和用戶體驗(yàn)。

@media screen and (max-width: 768px) {
/* 當(dāng)屏幕寬度小于等于 768px 時(shí)，應(yīng)用以下樣式 */
body {
font-size: 16px; /* 調(diào)整字體大小 */
padding: 20px; /* 調(diào)整頁面邊距 */
}
.header {
background-color: #f5f5f5; /* 更改背景色 */
}
.content {
display: block; /* 重置 display 屬性為 block */
width: 100%; /* 調(diào)整寬度 */
padding: 10px; /* 調(diào)整頁面邊距 */
}
}

以上是一個(gè)簡單的 CSS 媒體查詢，屏幕寬度小于等于 768px 時(shí)會(huì)應(yīng)用一些樣式。通過這種方式，可以根據(jù)不同屏幕尺寸應(yīng)用不同的 CSS 樣式。

此外，CSS flexbox 布局和 grid 布局也是實(shí)現(xiàn)自適應(yīng)布局的強(qiáng)大工具。它們可以使布局更加靈活模塊化，從而提高網(wǎng)站的可維護(hù)性和效率。

/* 使用 Flexbox 布局 */
.container {
display: flex;
justify-content: center; /* 居中對(duì)齊 */
}
.item {
flex-basis: 200px; /* 固定寬度 */
margin: 10px; /* 設(shè)置間距 */
}
/* 使用 Grid 布局 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自適應(yīng)寬度 */
grid-gap: 10px; /* 設(shè)置間距 */
}
.item {
background-color: #f5f5f5; /* 背景色 */
padding: 10px; /* padding */
}

在實(shí)際開發(fā)中，結(jié)合媒體查詢和 flexbox/grid 布局可以實(shí)現(xiàn)更加靈活和優(yōu)美的自適應(yīng)布局。