隨著手機屏幕不斷更新換代，不同分辨率的手機屏幕逐漸成為主流。而在Web開發中，為不同分辨率的手機屏幕適配CSS是非常重要的一點。

適配不同分辨率的手機屏幕需要使用CSS媒體查詢。媒體查詢是一種CSS3新特性，可以根據設備的不同特征應用不同的CSS樣式。在編寫CSS媒體查詢時，需要使用一些規則和語法。

//以iPhone 6/7/8為例，CSS樣式如下
@media screen and (min-device-width: 375px) and (max-device-width: 667px){
//CSS樣式
}

上面的代碼表示，在屏幕寬度介于375px到667px之間的設備上應用該CSS樣式。

還可以使用像素比（pixel ratio）為媒介查詢進行適配。像素比是設備的物理像素與CSS像素之比，例如，iPhone 6/7/8的像素比為2，而iPhone 6/7/8 Plus的像素比為3。

//以像素比為媒介查詢的樣式
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 375px) and (max-device-width: 667px){
//CSS樣式
}

像素比為媒介查詢可以根據設備的具體像素比選擇不同的CSS樣式。

需要注意的是，不同分辨率的手機屏幕適配CSS不僅僅是針對iPhone的屏幕，還包括Android手機和平板電腦等設備。因此，在開發過程中需要認真考慮并進行相關適配。