Can I use?
› http://caniuse.com/
Less
› http://lesscss.org
Cool Libraries
› Bootstrap from Twitter
› Jetstrap
这是一个创建于 4480 天前的主题，其中的信息可能已经有所发展或是发生改变。
目前找到个办法
就是把所有的图片放大一倍
以前100x100 现在200x200 然后利用 background-size: 100px 100px; 来缩放
但是图片大一倍,也就意味着 存储空间大了一倍,当然占的流量也多了,
还有一个就是 LOGO神马的 用AI制作,然后 不变大小,输出SVG格式
比如 http://www.elinkhost.com/logo.svg
这样的 跟普通图片一样调用即可!
就是把所有的图片放大一倍
以前100x100 现在200x200 然后利用 background-size: 100px 100px; 来缩放
但是图片大一倍,也就意味着 存储空间大了一倍,当然占的流量也多了,
还有一个就是 LOGO神马的 用AI制作,然后 不变大小,输出SVG格式
比如 http://www.elinkhost.com/logo.svg
这样的 跟普通图片一样调用即可!
 |
1
Livid MOD Logo 的这个思路不错，感谢分享。
|
 |
2
Sivan 2012-08-17 00:26:00 +08:00
先用 media query 判断是否为视网膜屏幕，然后给元素设置等比高清的背景图片以及 background-size 设置到 cover 或 contain 就可以了。
基本就是设计师像 iOS 程序那样出一套 @2x 素材，然后再在原 css 末尾添加上 media query 代码就 OK~ |
|
4
Sivan 2012-08-17 00:28:37 +08:00
<img /> 兼容视网膜途径比较多，基本都需要借助 js 而且代码会变的有点累赘，也有通过 CSS 替换的。
总体来说，网站自身的部分兼容视网膜倒还不是太麻烦。用户上传图片、文章图片等就蛋疼了。 |
1
 |
7
heymi 2012-08-17 00:31:34 +08:00
怎么说呢，SVG输出的效果不是很好，差很多。
|
 |
8
tension OP SVG:
 PNG 缩小  |
|
9
tension OP 图片放大 会发现 SVG的边缘 还是有锯齿的...
而PNG缩小到1倍效果后 明显没有 |
|
10
tension OP 看来V2EX 前端还是不够多!
|
 |
11
keakon 2012-08-17 14:51:00 +08:00
直接设置图片的长宽为原始的一半也行：
http://www.keakon.net/article/94200 可以在加载图片时用JS判断devicePixelRatio，然后找到retina图片的路径（例如加上@2x），在图片下载完成后缩小长宽并替换低分辨率图片。 |
 |
13
Mak 2012-08-17 15:02:02 +08:00
|
 |
14
Los 2012-08-17 15:22:13 +08:00
@tension 一个更残酷的情况，Retina版本在存储空间跟流量消耗上应该是非Retina版本的4倍而不是1倍，图片长和宽都增加为原来的2倍，图像面积就是原来的4倍，所以大小应该是之前的4倍的（图片压缩算法没研究过，不知道大图跟小图的压缩率差别大不大，但大小图存储空间比应该接近4倍左右）。
|
|
16
keakon 2012-08-17 15:54:23 +08:00
@tension 最重要的一点是css没有js灵活。你不可能为每张图片（含未来新增的）写一个css规则，但是一个js就能处理所有图片。
|
 |
18
yundanfengqing 2012-08-17 16:45:23 +08:00
弱弱的说一句 尺寸不变 提高分辨率行不行的？
|
 |
19
ghbjy1128 2012-08-17 17:04:16 +08:00
用户基数太低，无视之。
|
 |
20
rongbin 2012-08-17 17:07:42 +08:00
@tension 请问，你的系统所使用的字体有变更过吗？ 这也太清晰了吧。 同样10.8，我的不是retina，用的13 pro 101，你的看起来太舒服了。
|
|
21
tension OP |
|
22
Los 2012-08-17 17:26:51 +08:00
|
 |
24
SamZeng 2012-08-21 13:00:32 +08:00
|
 |
25
hzlzh 2012-08-21 13:33:29 +08:00
个人觉得 @2x 是最好的方案，理想情况下调用两个不同的script.png即可。相比没有做retina优化之前，只多了一条http请求和一段css media
|
 |
26
Thruth 2012-08-28 15:43:38 +08:00
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 2012-08-28 16:29:39 +08:00
|
|
30
Thruth 2012-08-28 17:44:47 +08:00
@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 MOD 今天更新网站 (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 2012-08-31 21:42:01 +08:00
FYI. 今天W3C刚发布了Responsive Image Extension 标准草案
http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/responsive-images.html 当然这是来自HTMLWG的，于是你懂得。。。 |
 |
34
smallcolor 2012-09-21 14:25:02 +08:00
|
Select Language