使用CSS精靈，同時還支持高密度顯示屏

是否有可能使用CSS sprites和仍然支持高密度（例如，視網膜）顯示？這可能意味着將正常和雙倍分辨率的圖像打包到單個精靈表中......問題在於如何指定偏移量？另一種可能的解決方案是以某種方式檢測（如何？）屏幕的密度並將類應用於身體。使用CSS精靈，同時還支持高密度顯示屏

有沒有人遇到這個問題？優雅的解決方案

來源

2013-09-24 KPthunder

這是否得到解決工作？ – Riskbreaker

可以使用min-device-pixel-ratio媒體查詢單獨加載精靈表（和指定單獨偏移），或在同一spritesheet指定單獨的偏移。

這將是更好地使用一個單獨的spritesheet每個密度，從而使客戶不需要下載它們不能顯示反正像素。

可以使用較少或SASS混入到指定偏移一次，並生成第二媒體query'd規則加倍補償。

來源

2013-09-24 02:43:53 SLaks

這樣的： -webkit-分設備像素比

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-resolution: 240dpi) { 
ul li { 
background-image: url('[email protected]'); 
} 
}

這可能是retina.png或任何你有高清版...

這應該對任何HD平板電腦和移動

來源

2013-09-24 02:50:48 Riskbreaker

使用CSS精靈，同時還支持高密度顯示屏

回答

相關問題