CSS自適應(yīng)布局是指網(wǎng)頁(yè)可以根據(jù)用戶使用的設(shè)備或?yàn)g覽器窗口大小自動(dòng)調(diào)整布局和樣式，以適應(yīng)不同尺寸的屏幕。下面是一些優(yōu)秀的CSS自適應(yīng)布局技巧：

/* 1. 媒體查詢 */
@media screen and (max-width: 768px) {
/* 手機(jī)屏幕樣式 */
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* 平板屏幕樣式 */
}
@media screen and (min-width: 1025px) {
/* 桌面屏幕樣式 */
}
/* 2. 視口單位 */
.container {
width: 100vw; /* 寬度為viewport寬度 */
height: 100vh; /* 高度為viewport高度 */
}
/* 3. 彈性布局 */
.container {
display: flex;
align-items: center;
justify-content: space-between;
}
/* 4. rem單位 */
html {
font-size: 16px;
}
.container {
width: 10rem; /* 寬度為10倍根元素字體大小 */
height: 10rem;
}
/* 5. 圖像響應(yīng)式 */
img {
max-width: 100%;
height: auto;
}

通過以上幾種方式的結(jié)合使用，可以實(shí)現(xiàn)一個(gè)真正意義上的自適應(yīng)網(wǎng)頁(yè)，給用戶帶來更好的使用體驗(yàn)。