问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

H5页面图标模糊

头像
hzrWeb
    1.2k108198

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

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

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

    前端前端设计csshtml5
    阅读 11.2k
    9 个回答
    得票最新
    头像
    sgosky
      234411

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

      头像
      xiaopengji
        6411719

        <!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>;只要你的图标的大小是外面包的盒子的大小是图标尺寸的倍数；就不会出现模糊的情况。

        头像
        kelvin_2004
          38914

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

          头像
          vizo
            41922737

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

            头像
            安于现状i
              8791410

              全部三倍图啊

              头像
              秋刀鱼Bin
                63311731

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

                头像
                楚云实
                  3
                  新手上路，请多包涵

                  遇到过，普通屏使用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');

                  }
                  }

                  头像
                  freezhang
                    71

                    直接使用三倍图

                    头像
                    xuhaibing
                      14721146

                      我是用的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/')))
});
                      撰写回答
                      你尚未登录，登录后可以
                      • 和开发者交流问题的细节
                      • 关注并接收问题和回答的更新提醒
                      • 参与内容的编辑和改进，让解决方法与时俱进
                      推荐问题