移动端上的图标到底怎么做，才会在各个屏幕上清晰？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4323 天前的主题，其中的信息可能已经有所发展或是发生改变。

通常的做法是什么？
是为每个分辨率做不同的图片？
还是就做一张大图，在不同分辨率的时候，等比缩小？

11 条回复 • 1970-01-01 08:00:00 +08:00

sneezry

2014 年 3 月 26 日

sneezry

2014 年 3 月 26 日

learnshare

2014 年 3 月 26 日

jsonline

2014 年 3 月 26 日 via Android

WebFont SVG

squallsdjl

2014 年 3 月 26 日

WEBFONT SVG同楼上，楼主可以访问我设计的网站看看用电脑和手机都看看，http://devin.zarktui.com/music/23

squallsdjl

2014 年 3 月 26 日

如果对于复杂构成的图标但是又要考虑漂亮清晰的话，（不考虑loading速度的问题的话）可以使用2X的图片，然后在手机端使用1X的比例。比如你做100X100px的图片，然后放到移动端的CSS你写成50X50px

shpasspass

2014 年 3 月 26 日

@squallsdjl
@jsonline
百度找了WebFont SVG 然后也没看懂这究竟是什么。。。
看上去是加载字体吧。。。但是图标怎么办呢？

rayps

2014 年 3 月 26 日

同意SVG

learnshare

2014 年 3 月 26 日

@squallsdjl +1

2x 是适配高分辨率的解决方案，但要保证不同分辨率下清晰可用，需要遵循设计规范

jsonline

2014 年 3 月 26 日 via Android

你用百度能搜明白才怪。用谷歌！
字体就是图标，图标就是字体。

squallsdjl

2014 年 4 月 6 日

换个思考方式，字体实际上也是图形构成，你说呢？