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

2012-08-17 00:15:53 +08:00
 tension
目前找到个办法

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

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

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

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

这样的 跟普通图片一样调用即可!
6907 次点击
所在节点    CSS
34 条回复
tension
2012-08-17 17:25:11 +08:00
@rongbin 没有哦...
@yundanfengqing 我试过调整DPI 貌似没用...
Los
2012-08-17 17:26:51 +08:00
刚看到的消息
Safari与Chrome浏览器开始支持高分辨率的CSS代码
http://cnbeta.com/articles/201973.htm
tension
2012-08-17 17:55:43 +08:00
@Los 这个到是不错!
SamZeng
2012-08-21 13:00:32 +08:00
hzlzh
2012-08-21 13:33:29 +08:00
个人觉得 @2x 是最好的方案,理想情况下调用两个不同的script.png即可。相比没有做retina优化之前,只多了一条http请求和一段css media
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 是推荐实践。
X_Del
2012-08-28 16:22:48 +08:00
@tension SVG 为毛会有锯齿?不是矢量吗(非 Retina 屏亲测无锯齿)?
qdvictory
2012-08-28 16:29:39 +08:00
bhuztez
2012-08-28 17:06:30 +08:00
@Thruth media query虽然是标准,但那个device-pixel-ratio是苹果独家的吧
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"。
tension
2012-08-28 20:16:52 +08:00
@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 */

}

这个很喜欢!!!
Kai
2012-08-30 03:00:28 +08:00
今天更新网站 (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 代替了 :(
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的,于是你懂得。。。
smallcolor
2012-09-21 14:25:02 +08:00
我要挖个坟。
@Livid 既然 V2EX Logo 已经是高清版本了,为什么不把搜索框也处理一下呢?
http://d.pr/i/xGjn

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/45352

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX