在Web開發中，CSS雪碧圖是一種優化網站性能的技術，它可以將多個小圖標合并成一張圖，以減少HTTP請求數并提高頁面加載速度。而使用rem單位可以使雪碧圖更加靈活，適應不同設備的屏幕分辨率。

rem是CSS3新增的相對單位，它是根據根元素的字體大小來計算的。因此，當根元素的字體大小改變時，所有使用rem單位的元素都會按比例調整大小。

在使用CSS雪碧圖時，我們可以將圖標的大小設置為rem單位，以便在不同的屏幕分辨率下，圖標的大小保持一致。例如：

.icon {
background-image: url(sprite.png);
background-repeat: no-repeat;
display: inline-block;
font-size: 16px;
height: 1rem;
width: 1rem;
}
.icon-home {
background-position: 0 0;
}
.icon-settings {
background-position: -1rem 0;
}

在上面的示例中，我們將圖標的大小設置為1rem x 1rem，同時指定了根元素的字體大小為16px。這就意味著，在任何屏幕分辨率下，圖標都將顯示為16px x 16px的大小。

同時，我們可以使用媒體查詢來針對不同的屏幕分辨率設定不同的字體大小，從而使圖標大小也隨之調整。例如：

@media (min-width: 640px) {
html {
font-size: 20px;
}
}
@media (min-width: 768px) {
html {
font-size: 24px;
}
}

在上述代碼中，我們為屏幕寬度大于640px和768px時分別設定了根元素的字體大小。這樣，使用rem單位的元素就會按比例調整大小，從而適應不同的屏幕分辨率。