2015-02-09 96 views

回答

3

這些2x圖標是爲具有視網膜顯示屏支持的設備創建的。如果您分析的fancybox CSS文件,到了最後,你會發現這些行:

/*Retina graphics!*/ 
@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-device-pixel-ratio: 1.5){ 

    #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 
     background-image: url([email protected]); 
     background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ 
    } 

    #fancybox-loading div { 
     background-image: url([email protected]); 
     background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ 
    } 
} 

如果婉使用它們在沒有-支持Retina顯示屏的設備或瀏覽器,我想你可能需要破解CSS文件並更改常規圖標的尺寸和精靈以匹配那些在媒體查詢