怎样解决 CSS Sprite 在高分屏（ Retina）下显示模糊的问题？

V2EX = way to explore

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

现在注册

已注册用户请登录

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

自己的网站小图标有点多，做成了 CSS Sprite ，但是发现在手机上显示模糊，现在的手机都是高分屏。找了好久都没找到解决方案。

BTW ，问一下要怎样才能系统的学习前端啊。自己现在学习前端有一些时间了，做了几个个人项目，但每次都会发现一些坑，花好长时间去搜索，虽然每次都有收获。本人电子信息专业大一，课程有 C 、 Java 、嵌入式，但个人对前端比较感兴趣，求系统学习前端方法。

10 条回复 • 2016-08-25 08:53:40 +08:00

viko16

2016-08-23 00:56:28 +08:00 via Android

不妨了解一下 SVG Sprite

cstome

2016-08-23 01:08:09 +08:00

@viko16 SVG Sprite 之前也折腾了很久，也没弄成。求推荐教程。

morethansean

2016-08-23 01:17:26 +08:00 via Android

用分辨率更高的图片啊

yyfearth

2016-08-23 05:40:08 +08:00

用一个 sprite@2x 的图片就好了啊
然后 css 里面用 media query 把这个图片应用到 retina 的环境里面并且设置 background-size

kkzxak47

2016-08-23 07:49:47 +08:00 via Android

分辨率啊，要么图片本身分辨率够高，要么矢量图

Krime

2016-08-23 09:21:12 +08:00

不是说 github 早都换成 inline 的 svg 了吗？

viko16

2016-08-23 09:49:22 +08:00

@cstome

理解的话可以看看这篇
https://css-tricks.com/svg-sprites-use-better-icon-fonts/

直接用的话可以到这个站找找
https://icomoon.io/

工具的话，就得自己找了

newbieo0O

2016-08-23 09:50:19 +08:00

SVG 、 Font 。 Sprite 已经很少用了。

pein

2016-08-23 11:06:34 +08:00

两倍大小缩成一倍就清楚

cstome

2016-08-25 08:53:40 +08:00

@yyfearth background-size 要怎么设，我设置后是整张 sprite 缩小成我设置的尺寸。