在手機(jī)逐漸普及之后，如何適配不同手機(jī)屏幕成為了一個(gè)重要的問(wèn)題，因?yàn)椴煌謾C(jī)的尺寸、分辨率各不相同，如果不對(duì)網(wǎng)頁(yè)進(jìn)行適配，用戶體驗(yàn)將受到很大影響。而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媒體查詢對(duì)不同屏幕的尺寸、方向進(jìn)行了判斷，然后設(shè)置對(duì)應(yīng)的樣式。其中，safe-area-inset-bottom是iPhone X新增的屬性，用于調(diào)整底部邊距，避免內(nèi)容被遮擋。而在iPad Mini和iPad Pro上，為了適配橫屏顯示效果，設(shè)置了小幅度的padding-bottom值。

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