隨著全面屏手機的普及，網頁的適配問題變得越來越重要。在CSS中，我們可以使用媒體查詢來實現對不同屏幕尺寸的適配。

對于全面屏手機，我們需要控制頁面內容不被劉海、圓角等元素遮擋。為此，我們可以使用CSS的 safe-area-inset 屬性來實現。

body{
padding-top: env(safe-area-inset-top); /* 頂部劉海高度 */
padding-bottom: env(safe-area-inset-bottom); /* 底部圓角高度 */
padding-left: env(safe-area-inset-left); /* 左側圓角高度 */
padding-right: env(safe-area-inset-right); /* 右側圓角高度 */
}

此外，對于全面屏手機分辨率更高的情況下，我們也需要考慮圖片的清晰度。可以使用CSS的 image-set 屬性來加載高清圖片和普通圖片。

img{
background-size: contain;
background-repeat: no-repeat;
background-position: center;
content: "";
display: inline-block;
height: 100%;
width: 100%;
background-image: -webkit-image-set(
url(/images/high-res.png) 1x, 
url(/images/high-res-2x.png) 2x
);
background-image: image-set(
url(/images/high-res.png) 1x, 
url(/images/high-res-2x.png) 2x
);
}

綜上，全面屏手機的適配需要我們充分利用CSS的新特性，如 safe-area-inset 和 image-set，以確保頁面在不同分辨率和不同尺寸的全面屏手機上呈現良好。