Question

如何让fancybox 2使用更大的图标版本？这些（fancybox_loading@2x.gif,fancybox_sprite@2x.png）

这很糟糕我必须写一些东西，所以这个页面可以让我发表我的问题。

Answer 1

为具有视网膜显示支持的设备创建了这些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(fancybox_sprite@2x.png);
        background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
    }

    #fancybox-loading div {
        background-image: url(fancybox_loading@2x.gif);
        background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
    }
}

如果您想在非视网膜显示支持设备或浏览器中使用它们，我猜您可能需要破解CSS文件并更改常规图标的尺寸和精灵以匹配媒体查询

如何让fancybox使用更大的图标

1 个答案: