在手機逐漸普及之后，如何適配不同手機屏幕成為了一個重要的問題，因為不同手機的尺寸、分辨率各不相同，如果不對網頁進行適配，用戶體驗將受到很大影響。而CSS水滴屏適配，則是其中一種比較流行的方案。

@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (orientation : portrait) {
/*iPhone X*/    
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
/*iPad Mini*/   
body {
padding-bottom: 20px;
}
}
@media only screen and (min-width : 1024px) and (max-width : 1366px) and (orientation : landscape) {
/*iPad Pro*/ 
body {
padding-bottom: 20px;
}
}

上述代碼中，使用了@media媒體查詢對不同屏幕的尺寸、方向進行了判斷，然后設置對應的樣式。其中，safe-area-inset-bottom是iPhone X新增的屬性，用于調整底部邊距，避免內容被遮擋。而在iPad Mini和iPad Pro上，為了適配橫屏顯示效果，設置了小幅度的padding-bottom值。

除了上述方法，還有其他一些常用的水滴屏適配方案，如rem適配、viewport適配等，可以根據具體情況選用。總之，無論哪種方案，都要保證網頁在不同屏幕上顯示的效果穩定、統一，讓用戶有更好的使用體驗。