0

在web中图标现在有几种方案,雪碧图,iconfont,svg,不过通常设计师给的图标都是PNG,包含二倍图,三倍图,此时无法使用iconfont和svg方案,怎么做到ios下面图标不模糊?

之前项目一直尝试使用二倍图合并成雪域图,是否需要根据屏幕像素比生成一张1倍、2倍、3倍的雪域图,然后根据设备dpr判断选择哪张?不过这似乎有点麻烦,求前端大神解答。

补充一下是dpr>=2的设备使用1倍图会有模糊的情况,除了svg、根据设备dpr判断选择倍数图,还有什么解决方案么?

9个回答

0

小图标的话可以直接固定大小就好,图标设计多大就切多大。就很清晰,我就是这么干的

0

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title></title>
    <style type="text/css">
        .box{width:61px;height:22px;}
        .box img{width:100%;}
    </style>
</head>
<body>
    <div class="box">
        <img src="img/logo.png"/>
    </div>
</body>

</html>;只要你的图标的大小是外面包的盒子的大小是图标尺寸的倍数;就不会出现模糊的情况。

0

最方便的做法是全部用@3✘的图,不用区分设备,一般项目都没影响的

0

使用稍大的图片生成sprite图 然后使用 background-position定位 background-size 微调 尽量叫设计师用iconfont 可以自己上传svg图标上去.

0

全部三倍图啊

0

我一般直接用2倍左右的图,然后background-size:xxxrem;(或者百分比,px),backgroud-position定位,一样的

0

遇到过,普通屏使用1倍图,retina屏使用两倍图。css判断
.logo {

background-image: url('img/logo.jpg');
width:200px;
height:200px;
background-size:100% 100%;

}
@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){
.logo {

background-image: url('img/logo@2x.jpg');

}
}

0

直接使用三倍图

0

我是用的gulp里面的雪碧图插件,可以百度了解下

// 雪碧图
gulp.task('sprites', function() {
    return sprity.src({
            src: './src/images/icon/**/*.{png,jpg}',
            style: './_icon.scss',
            // orientation: 'left-right',
            'dimension': [{
                ratio: 1,
                dpi: 72
            }, {
                ratio: 2,
                dpi: 192
            }],
            template: './src/template/template.hbs',
            processor: 'css',
        })
        .pipe(gulpif('*.png', gulp.dest('./src/images/'), gulp.dest('./src/sass/')))
});

撰写答案