在網頁開發中，CSS（層疊樣式表）是不可或缺的一部分。CSS 優化適配是指在編寫和部署 CSS 代碼時考慮到效率和多種設備上的顯示適配性的方法。

/* 以下是 CSS 代碼優化適配的一些技巧 */
/* 避免使用絕對定位 */
.box {
position: relative;
left: 10px;
top: 20px;
}
/* 使用 Flexbox 布局代替 float */
.container {
display: flex;
flex-wrap: wrap;
}
/* 避免使用逐層嵌套的選擇器 */
.container .item h1 span {
color: red;
}
/* 使用媒體查詢做響應式布局 */
@media screen and (max-width: 768px) {
.container {
display: block;
}
}

絕對定位在不同屏幕尺寸上的顯示效果可能不同，而Flexbox 布局則可以使元素基于視口重新計算位置和大小。逐層嵌套的選擇器會增加 CSS 的計算量和加載時間，使用媒體查詢可以針對不同屏幕尺寸和設備類型展示不同的布局和樣式。

通過優化 CSS 代碼以適應不同設備和屏幕尺寸，可以提高網頁的性能和用戶體驗。這些技巧可以幫助開發者更好地進行 CSS 代碼的編寫和維護，同時在各種設備上提供一致的視覺效果。