如何让 fancybox 使用更大的图标

Question

如何让 fancybox 2 使用其更大的图标版本？这个 (fancybox_loading@2x.gif, fancybox_sprite@2x.png)

这很糟糕我必须写点东西所以这个页面将允许我 post 我的问题。

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*/
    }
}

如果你想在 none-retina-display 支持的设备或浏览器中使用它们，我想你可能需要破解 CSS 文件并将常规图标的尺寸和精灵更改为匹配 媒体查询

中的那些

如何让 fancybox 使用更大的图标

How do I make fancybox use its larger icons

jquery

fancybox