CSS異形屏適配是現代網頁設計中需要考慮的一個重要問題。由于不同的設備具有不同的屏幕大小、分辨率以及屏幕翻轉模式，因此需要對網頁進行適配以確保內容在不同設備上具有良好的呈現效果。

@media only screen and (max-width: 480px) {
/* 在小屏幕上執行的樣式 */
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
/* 在中等大小屏幕上執行的樣式 */
}
@media only screen and (min-width: 769px) {
/* 在大屏幕上執行的樣式 */
}

為了適應異形屏，可以使用CSS的媒體查詢功能。媒體查詢是一種用于指定特定設備屬性的CSS技術。通過使用媒體查詢，我們可以根據設備的屏幕寬度、高度、分辨率等屬性，為不同的設備定制不同的樣式。

同時，也可以通過使用流動布局和彈性布局技術來適應不同的設備。流動布局和彈性布局可以自動調整內容大小和布局以適應不同的屏幕大小。

.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
flex-basis: 30%;
margin: 1em;
}

最后，在進行異形屏適配時也需要注意網頁性能和用戶體驗。不良的適配方案可能會導致網頁加載時間過長、用戶體驗不佳等問題。因此，在適配過程中應該盡量減少不必要的樣式和圖片等資源，以提高網頁性能。