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

V2EX = way to explore

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

已注册用户请登录

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

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

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

sneezry

2014-03-26 11:13:59 +08:00

sneezry

2014-03-26 11:14:46 +08:00

learnshare

2014-03-26 11:19:59 +08:00

jsonline

2014-03-26 11:20:27 +08:00 via Android

WebFont SVG

squallsdjl

2014-03-26 12:21:41 +08:00

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

squallsdjl

2014-03-26 12:23:21 +08:00

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

shpasspass

2014-03-26 13:18:50 +08:00

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

rayps

2014-03-26 13:33:32 +08:00

同意SVG

learnshare

2014-03-26 13:36:45 +08:00

@squallsdjl +1

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

jsonline

2014-03-26 13:43:22 +08:00 via Android

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

squallsdjl

2014-04-06 20:47:41 +08:00

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