CSS 自適應屏幕尺寸是一種響應式設計，能夠為不同屏幕尺寸的設備提供適當的風格和布局。此外，自適應布局也有助于提高網站的可用性和用戶體驗。

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

以上是一個簡單的 CSS 媒體查詢，屏幕寬度小于等于 768px 時會應用一些樣式。通過這種方式，可以根據不同屏幕尺寸應用不同的 CSS 樣式。

此外，CSS flexbox 布局和 grid 布局也是實現自適應布局的強大工具。它們可以使布局更加靈活模塊化，從而提高網站的可維護性和效率。

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

在實際開發中，結合媒體查詢和 flexbox/grid 布局可以實現更加靈活和優美的自適應布局。