有没人聊一下Retina 下 网页如何制作?

[tension]

目前找到个办法

就是把所有的图片放大一倍
以前100x100 现在200x200 然后利用 background-size: 100px 100px; 来缩放

但是图片大一倍,也就意味着 存储空间大了一倍,当然占的流量也多了,

还有一个就是 LOGO神马的 用AI制作,然后 不变大小,输出SVG格式

比如 http://www.elinkhost.com/logo.svg

这样的 跟普通图片一样调用即可!

[Livid]

Logo 的这个思路不错，感谢分享。

[Sivan]

先用 media query 判断是否为视网膜屏幕，然后给元素设置等比高清的背景图片以及 background-size 设置到 cover 或 contain 就可以了。

基本就是设计师像 iOS 程序那样出一套 @2x 素材，然后再在原 css 末尾添加上 media query 代码就 OK~

[tension]

@Sivan media query 只能用webkit... Firefox 怎么办!!!!

[Sivan]

<img /> 兼容视网膜途径比较多，基本都需要借助 js 而且代码会变的有点累赘，也有通过 CSS 替换的。

总体来说，网站自身的部分兼容视网膜倒还不是太麻烦。用户上传图片、文章图片等就蛋疼了。

[Sivan]

@tension 都支持的啊，ie 也支持（低版本用 js）。

[tension]

@Livid 用AI储存为 SVG 设置如下,我设置了好多次,才输出对的

[heymi]

怎么说呢，SVG输出的效果不是很好，差很多。

[tension]

SVG:

PNG 缩小

[tension]

图片放大 会发现 SVG的边缘 还是有锯齿的...

而PNG缩小到1倍效果后 明显没有

[tension]

看来V2EX 前端还是不够多!

[keakon]

直接设置图片的长宽为原始的一半也行：
http://www.keakon.net/article/94200

可以在加载图片时用JS判断devicePixelRatio，然后找到retina图片的路径（例如加上@2x），在图片下载完成后缩小长宽并替换低分辨率图片。

[tension]

@keakon 你那个 适合 <img src=**** alt="" />

不适合 CSS啊!

[Mak]

http://www.aoao.org.cn/blog/2012/04/retina-display-image-2x/
看看这篇

[Los]

@tension 一个更残酷的情况，Retina版本在存储空间跟流量消耗上应该是非Retina版本的4倍而不是1倍，图片长和宽都增加为原来的2倍，图像面积就是原来的4倍，所以大小应该是之前的4倍的（图片压缩算法没研究过，不知道大图跟小图的压缩率差别大不大，但大小图存储空间比应该接近4倍左右）。

[tension]

@Mak 嗷嗷写的..不错..
他也说了 还是图片x2是最好的方案!

[keakon]

@tension 最重要的一点是css没有js灵活。你不可能为每张图片（含未来新增的）写一个css规则，但是一个js就能处理所有图片。

[tension]

@keakon 是的...

所以我现在的方案是直接把所有图片放大一倍,然后缩小

[yundanfengqing]

弱弱的说一句 尺寸不变 提高分辨率行不行的？

[ghbjy1128]

用户基数太低，无视之。

[rongbin]

@tension 请问，你的系统所使用的字体有变更过吗？ 这也太清晰了吧。 同样10.8，我的不是retina，用的13 pro 101，你的看起来太舒服了。