CSS二倍圖指的是一種前端技術，通過使用CSS樣式來實現在Retina屏幕上（像素密度高達2倍于普通屏幕）顯示高清晰度的圖片。下面就來詳細介紹一下CSS二倍圖及其使用方法。

/* CSS代碼實現二倍圖 */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
.logo{
background-image: url(path/to/logo@2x.png);
background-size: 100px 100px; /* 根據實際大小設置 */
}
}

其中，媒體查詢中的像素比（pixel ratio）用于檢測屏幕上每個CSS像素對應的硬件像素數量，因為Retina屏幕上每個CSS像素會對應2個硬件像素，所以CSS二倍圖需要設置min-device-pixel-ratio:2。在選擇器中，設置background-image為2倍大小的圖片，并通過background-size屬性設置圖片在HTML文檔中的實際大小。

CSS二倍圖是在高清晰化的同時減少圖片大小，加速頁面加載速度的利器，我們可以在實際項目中嘗試使用。