V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
cstome
V2EX  ›  前端开发

怎样解决 CSS Sprite 在高分屏( Retina)下显示模糊的问题?

  •  
  •   cstome · 2016-08-22 23:41:46 +08:00 · 2712 次点击
    这是一个创建于 2812 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    10 条回复    2016-08-25 08:53:40 +08:00
    viko16
        1
    viko16  
       2016-08-23 00:56:28 +08:00 via Android
    不妨了解一下 SVG Sprite
    cstome
        2
    cstome  
    OP
       2016-08-23 01:08:09 +08:00
    @viko16 SVG Sprite 之前也折腾了很久,也没弄成。求推荐教程。
    morethansean
        3
    morethansean  
       2016-08-23 01:17:26 +08:00 via Android
    用分辨率更高的图片啊
    yyfearth
        4
    yyfearth  
       2016-08-23 05:40:08 +08:00   ❤️ 1
    用一个 sprite@2x 的图片就好了啊
    然后 css 里面用 media query 把这个图片应用到 retina 的环境里面并且设置 background-size
    kkzxak47
        5
    kkzxak47  
       2016-08-23 07:49:47 +08:00 via Android
    分辨率啊,要么图片本身分辨率够高,要么矢量图
    Krime
        6
    Krime  
       2016-08-23 09:21:12 +08:00
    不是说 github 早都换成 inline 的 svg 了吗?
    viko16
        7
    viko16  
       2016-08-23 09:49:22 +08:00   ❤️ 1
    @cstome

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

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

    工具的话,就得自己找了
    newbieo0O
        8
    newbieo0O  
       2016-08-23 09:50:19 +08:00
    SVG 、 Font 。 Sprite 已经很少用了。
    pein
        9
    pein  
       2016-08-23 11:06:34 +08:00
    两倍大小缩成一倍就清楚
    cstome
        10
    cstome  
    OP
       2016-08-25 08:53:40 +08:00
    @yyfearth background-size 要怎么设,我设置后是整张 sprite 缩小成我设置的尺寸。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   763 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 22:03 · PVG 06:03 · LAX 15:03 · JFK 18:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.