Question

我在这个网站上使用了旋风滑块：http://www.malithaisouthcenter.com/ 在设置中我可以选择设置宽度（我当前设置为1600）。现在，如果我想让滑块图像视网膜准备就绪，我该怎么办？我知道我可以准备好视网膜图像。让他们通过浏览器使用以下代码进行缩减采样：

.img {
    background-image: url(Retina-image-800x600-2x.png);
    background-size: 400px 300px;
    background-repeat: no-repeat;
    display: block;
    width: 400px;
    height: 300px;
}

但问题是，我们谈论的是一组图片，而不仅仅是一张图片。

Answer 1

retina.js - JAVASCRIPT METHOD

一个小型JavaScript文件，可检测@ 2x图像并将其显示在视网膜设备上。下载retina.js，并将其包含在您的网页中，标签之间包含以下内容，或者将其放在结束标记之前。

<script type="text/javascript" src="js/retina.js"></script>

媒体查询 - 定位像素比例和分辨率

媒体查询可用于定位视网膜设备，以便包含高分辨率图形，例如：

@media

(-webkit-min-device-pixel-ratio: 2),

(min-resolution: 192dpi) {

/* Retina graphics */

}

或

/ *用于高分辨率设备的CSS * /

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    .icons {
    background-image: url(Retina-image-800x600-2x.png);
    background-size: 400px 300px;
    background-repeat: no-repeat;
    display: block;
    width: 400px;
    height: 300px;
    }
}

或

在基于webkit的浏览器中，image-set ()已受支持。

.image {    
background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );   
}

如何使旋风滑块图像视网膜准备好

1 个答案: