简单比较一下使用CSS元素和图片元素构建出来的网站的区别

感谢iOS的网站扩大手势的各种好用XD
这里用水果的官网做对比:
Apple

将网页放大到iOS版Safari能够放的最大后,可以看到使用HTML5新编写的新导航栏的转角仍然非常圆滑没有任何像素感,甚至连那只水果标志也完全没有任何不对劲的感觉;当然本来文字方面iOS很简单就能平滑放大,但是那个水果标志“”尽管在UTF编码里面存在(但是好像据说Windows不能显示),可是偶查看源代码的时候发现那个标志并非使用UTF文字,因此感觉似乎应该是CSS写出来的?
Apple

同样是水果的官网,下面的Hot News的部分周围的圆角就是使用图片做出来的,可以看到放大之后非常明显圆角有像素感;顺便下面的The Daily的文字部分也是图片内嵌入的,所以放大之后和普通的文字之间差距一目了然
Apple

再放一张很明显的对比图
Apple

以上——话说明天就是最惨的一天也是最后的一天了偶居然把时间花在这个东西上面orz

Author: 星野恵瑠

Mac user, Niji-Ota, Chinese, Now working in Japan at MAGES. Inc., Future's aim is that one day my name can be listed in Wikipedia

20 thoughts on “简单比较一下使用CSS元素和图片元素构建出来的网站的区别”

  1. 从实验来看:只有safari on ipad 的苹果标志才是矢量的,而safari on windows,chrome on windows全部沦陷(按住crtl+鼠标滚轮放大缩小),更值得一提的是后两者连旁边的store都是图片的。我想可能是WINDOWS下没有STORE以及苹果图标的素材(如你所说在MAC UTF里有,以及苹果特有的苹果字体),只有MAC才能基于矢量显示这些图片。图片见此:http://goo.gl/4t5Mw

      (Quote)  (Reply)

  2. @Lovee:
    重新解释一下,发太快了- –
    水果知道肯定有人用他们的浏览器来放大他们的网站,而下面那个网站是因为站长不知道会有人用水果的浏览器放大他们的网站。毕竟很多人在用温都死- –

      (Quote)  (Reply)

  3. 每次到迫不得已要用图片的时候就安慰自己…..安啦,没有人会闲的没事在你的网站使用放大这种功能的….

    喂喂…提交留言提示缓存错误….怎么回事…

      (Quote)  (Reply)

Leave a Reply

Your email address will not be published. Required fields are marked *

(;;) (:D) (!!!!) (……) (^o^;) (==) (OoO) (=v=o) more »