隨著 Android 系統的不斷升級，越來越多的手機出現了劉海屏設計，這對前端開發人員來說也帶來了新的適配問題。在使用 CSS 來處理和適配劉海屏時，我們需要注意以下幾個方面：

1. 設置視口

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

viewport-fit 屬性可以使網頁內容填充整個屏幕，使劉海屏更好地適配。

2. 使用安全區

.header {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}

使用 constant 和 env 兼容不同的瀏覽器，可以避免內容被劉海屏遮擋的問題。

3. 彈性布局

.container {
display: flex;
justify-content: center;
}

彈性布局可以根據屏幕大小和劉海屏的位置自動調整布局，使網頁看起來更加美觀。

總的來說，適配劉海屏并沒有那么困難，只需要注意以上幾個方面就可以保證網頁在劉海屏手機上正確顯示。