简单比较一下使用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元素和图片元素构建出来的网站的区别”

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

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

    Reply

  8. 水果知道肯定有人用他们的浏览器来放大自己网站~~~so~~他们根本没留意到温都死（指下面那个网站）

    Reply

  10. – – 嗯 我也发现这个问题了…
    图片跟CSS可以达到一样的效果 但是不一样总是不一样…
    细心的lovee啊~~

    Reply

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

    Reply

  16. ttp://images.apple.com/global/nav/images/globalnav_text.png
    实际上，那个苹果包括文字都是图片……

    Reply

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

    Reply

Leave a Reply

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

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks: 

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

(;;) (:D) (!!!!) (……) (^o^;) (==) (OoO) (=v=o) more »Note: Commenter is allowed to use '@User+blank' to automatically notify your reply to other commenter. e.g, if ABC is one of commenter of this post, then write '@ABC '(exclude ') will automatically send your comment to ABC. Using '@all ' to notify all previous commenters. Be sure that the value of User should exactly match with commenter's name (case sensitive).