CSS中，可利用@media規則來針對不同的設備特性定義不同的樣式。在設計響應式布局時，經常需要根據不同的手機瀏覽器分辨率設置樣式，使網站在各種設備上呈現良好的效果。

移動設備的屏幕大小和分辨率千差萬別，其中常見的分辨率有320x480、640x960、750x1334、1080x1920等。在CSS中設置針對手機瀏覽器分辨率的樣式時，可按照以下方式進行。

/* iPhone 4/4S */
@media screen and (device-width: 320px) and (device-height: 480px) {
/* 在此處編寫樣式 */
}
/* iPhone 5/5S */
@media screen and (device-width: 320px) and (device-height: 568px) {
/* 在此處編寫樣式 */
}
/* iPhone 6/6S/7/8 */
@media screen and (device-width: 375px) and (device-height: 667px) {
/* 在此處編寫樣式 */
}
/* iPhone 6/6S/7/8 Plus */
@media screen and (device-width: 414px) and (device-height: 736px) {
/* 在此處編寫樣式 */
}
/* iPhone X */
@media screen and (device-width: 375px) and (device-height: 812px) {
/* 在此處編寫樣式 */
}
/* iPad */
@media screen and (device-width: 768px) and (device-height: 1024px) {
/* 在此處編寫樣式 */
}

上述代碼中以iPhone 4/4S為例，編寫了一個@media媒體查詢規則，條件設備寬度為320px，高度為480px時，該規則下的樣式將生效。

在實際制作過程中，需根據實際情況設計不同設備的樣式，以實現最佳的用戶體驗。同時，還可利用JavaScript等腳本技術，結合CSS補充不支持@media規則的瀏覽器。