 |
1
Livid MOD PRO Logo 的这个思路不错，感谢分享。
|
 |
2
Sivan Aug 17, 2012
先用 media query 判断是否为视网膜屏幕，然后给元素设置等比高清的背景图片以及 background-size 设置到 cover 或 contain 就可以了。
基本就是设计师像 iOS 程序那样出一套 @2x 素材，然后再在原 css 末尾添加上 media query 代码就 OK~ |
|
4
Sivan Aug 17, 2012
<img /> 兼容视网膜途径比较多，基本都需要借助 js 而且代码会变的有点累赘，也有通过 CSS 替换的。
总体来说，网站自身的部分兼容视网膜倒还不是太麻烦。用户上传图片、文章图片等就蛋疼了。 |
 |
7
heymi Aug 17, 2012
怎么说呢，SVG输出的效果不是很好，差很多。
|
 |
8
tension OP SVG:
 PNG 缩小  |
|
9
tension OP 图片放大 会发现 SVG的边缘 还是有锯齿的...
而PNG缩小到1倍效果后 明显没有 |
|
10
tension OP 看来V2EX 前端还是不够多!
|
 |
11
keakon Aug 17, 2012
直接设置图片的长宽为原始的一半也行：
http://www.keakon.net/article/94200 可以在加载图片时用JS判断devicePixelRatio，然后找到retina图片的路径（例如加上@2x），在图片下载完成后缩小长宽并替换低分辨率图片。 |
 |
13
Mak Aug 17, 2012
|
 |
14
Los Aug 17, 2012
@tension 一个更残酷的情况，Retina版本在存储空间跟流量消耗上应该是非Retina版本的4倍而不是1倍，图片长和宽都增加为原来的2倍，图像面积就是原来的4倍，所以大小应该是之前的4倍的（图片压缩算法没研究过，不知道大图跟小图的压缩率差别大不大，但大小图存储空间比应该接近4倍左右）。
|
 |
18
yundanfengqing Aug 17, 2012
弱弱的说一句 尺寸不变 提高分辨率行不行的？
|
 |
19
ghbjy1128 Aug 17, 2012
用户基数太低，无视之。
|
 |
20
rongbin Aug 17, 2012
@tension 请问，你的系统所使用的字体有变更过吗？ 这也太清晰了吧。 同样10.8，我的不是retina，用的13 pro 101，你的看起来太舒服了。
|
|
21
tension OP |
|
22
Los Aug 17, 2012
|
 |
25
hzlzh PRO 个人觉得 @2x 是最好的方案，理想情况下调用两个不同的script.png即可。相比没有做retina优化之前，只多了一条http请求和一段css media
|
 |
26
Thruth Aug 28, 2012
1. SVG 方案不具有部署上的可扩展性质：
a)提供方位图转换生成SVG后缩放各种失真 b)SVG 各种profile支持各个版本浏览器实现不一 c)客户端SVG作图有性能需求，即便有硬件加速，在 SVG 密集的情况下低能设备依然会出现响应延迟等现象（如低端 Android 手机）。 2. media query 已经被收入 w3c CSS 标准，webkit 事实实现。考虑到大多 Retina 硬件都有 webkit 内核浏览器，Fx/IE 等他们跟上就好。media query + 2x 是推荐实践。 |
 |
28
qdvictory Aug 28, 2012
|
|
30
Thruth Aug 28, 2012
@bhuztez -webkit-device-pixel-ratio 是 webkit 搞出来的私有属性，应该是 5/6 年前就有了。CSSWG 貌似对这个属性不感冒，而在 CSS media query 中用 resolution 解决这个问题。所以对于非 webkit 浏览器来说，device-pixel-ratio 的支持都是可选的（有的支持有的没有，毕竟不是标准规定）。此时可用 96 dpi x ratio 得到 resolution 取值。
比如 "-webkit-min-device-pixel-ratio: 1.5;" 在其他浏览器就是"min-resolution: 144 dpi;"。为了取消 resolution 计算，CSSWG 定义了 dppx 这个单位，所以将来可以直接写成："min-resolution: 1.5dppx"。 |
|
31
tension OP @qdvictory header {
background: -webkit-image-set( url(images/header.jpg) 1x, url(images/header_2x.jpg) 2x); height: 150px; /* height in CSS pixels */ width: 800px; /* width in CSS pixels */ } 这个很喜欢!!! |
 |
32
Kai Aug 30, 2012
今天更新网站 (http://chnlaws.com) 试了试楼上同学们提出的方法。最后还是用了 @SamZeng 给出的 Smashing Magazine 那篇文章里面的：
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .block_to_2x { background-image: url(block_image_2x.png); } } 另外发现，Icon Composer 做出来的 favicon 没法正确识别？最后还是拿一张 32x32 的 favicon.png 代替了 :( |
|
33
Thruth Aug 31, 2012
FYI. 今天W3C刚发布了Responsive Image Extension 标准草案
http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/responsive-images.html 当然这是来自HTMLWG的，于是你懂得。。。 |
 |
34
smallcolor Sep 21, 2012
|
1
Select Language