在網頁開發中，我們經常需要對不同的設備進行優化，以達到更好的用戶體驗。而移動設備的像素密度則成為了我們需要考慮的一項關鍵因素。因為像素越高，則需要更清晰的圖片和更高的分辨率，從而導致加載速度變慢和運行效率下降。為此，我們需要使用CSS來判斷手機的像素密度，并針對不同的設備進行不同的樣式設置。

/* 判斷手機像素密度 */
@media (-webkit-min-device-pixel-ratio: 2), /* 在Safari和Chrome中運行 */
(min--moz-device-pixel-ratio: 2), /* 在Firefox中運行 */
(min-resolution: 2dppx) /* 在IE和Opera中運行 */ {
/* 在手機像素密度為2的設備上運行的代碼 */
.example {
font-size: 18px;
}
}
@media (-webkit-min-device-pixel-ratio: 3), /* 在Safari和Chrome中運行 */
(min--moz-device-pixel-ratio: 3), /* 在Firefox中運行 */
(min-resolution: 3dppx) /* 在IE和Opera中運行 */ {
/* 在手機像素密度為3的設備上運行的代碼 */
.example {
font-size: 24px;
}
}

上述代碼使用@media查詢，根據不同的像素密度來設置不同的字體大小。其中，-webkit-min-device-pixel-ratio和min--moz-device-pixel-ratio用來檢測Safari、Chrome和Firefox的像素密度，并且值為像素密度的倍數。而min-resolution則用來檢測IE和Opera的像素密度，它的值為每英寸點數(dots per inch)。在這里，我們可以根據不同的像素密度設置不同的字體大小，以適應不同的設備，并提升用戶的體驗。