• 随笔:24
  • 图书:28|
  • 留言: |
  • 总访问量:76078|

9WY博客

欢迎您的访问

网站如何适配Retina屏幕

作者/ WY

随着2012年苹果发布第一款Retina Macbook Pro(以下简称RMBP),Retina屏幕开始进入笔记本行业。两年过去了,RMBP的市场占有率越来越高,且获得了一大批设计师朋友的青睐,网站对于Retina屏幕的适配也变成了迫在眉睫的问题。

如果大家对于Retina适配的重要性不是特别清楚,请看我的两个截图:

98740

上图是Google的首页LOGO,我们对比下图SOSO的LOGO:

98741

如果大家还是看不出来,请自行访问这两个网站或者下载附件的截图对比。

说完了重要性,适配Retina的原理又是什么呢?我们知道,当一个图像在标准设备下全屏显示时,一位图像素对应的就是一设备像素,导致一个完全保真的显示,因为一个位置像素不能进一步分裂。而当在Retina屏幕下时,他要放大四倍来保持相同的物理像素的大小,这样就会丢失很多细节,造成失真的情形。换句话说,每一位图像素被乘以四填补相同的物理表面在视网膜屏幕下显示。(摘自《走向视网膜(Retina)的Web时代》)

对此,解决方法相信大家也都听过,就是通过制作两种不同的图形,一张是普通屏幕的图片,另外一种是Retina屏幕的图形,而且Retina屏幕下的图片是普通屏幕的两倍像素。

原理虽然简单,在现实中要实现就不仅仅如此,需综合考虑加载速度,浏览器适配等多方面因素,本文就是教大家如何对Retina的屏幕进行适配。

1.直接加载2倍大小的图片。

假如要显示的图片大小为200px*300px,你准备的实际图片大小应该为400px*600px,并且使用以下代码控制即可:

这种方法就解决了Retina显示不清楚的问题,但是在普通屏幕下,这种图片要经过浏览器的压缩,在IE6和IE7上有十分差得显示效果,同时,两倍大小的图片势必会导致页面加载时间加长,用户体验下降,此时,我们可以通过Retina.js(http://retinajs.com/)文件解决:

<img class="”pic”" src="”pic.png”" height="”200px”" width="”300px”/" data_ue_src="”pic.png”"><div type="”text/javascript”" _ue_org_tagname="script" _ue_div_script="1" _ue_script_data="%0A%24(document).ready(function%20()%20%7B%0Aif%20(window.devicePixelRatio%20%3E%201)%20%7B%0Avar%20images%20%3D%20%24(%E2%80%9Cimg.pic%E2%80%9D)%3B%0Aimages.each(function(i)%20%7B%0Avar%20x1%20%3D%20%24(this).attr(%E2%80%98src%E2%80%99)%3B%0Avar%20x2%20%3D%20x1.replace(%2F(.*)(.w%2B)%2F%2C%20%E2%80%9C%241%402x%242%E2%80%B3)%3B%0A%24(this).attr(%E2%80%98src%E2%80%99%2C%20x2)%3B%0A%7D)%3B%0A%7D%0A%7D)%3B%0A" _ue_custom_node_="1"></div>

2.Image-set控制

假如要显示的图片大小为200px*300px,你准备的图片应有两张:一张大小为200px*300px,命名为pic.png;另一张大小为400px*600px,命名为pic@2x.png(@2x是Retina图标的标准命名方式),然后使用以下css代码控制:

#logo {
background: url(pic.png) 0 0 no-repeat;
background-image: -webkit-image-set(url(pic.png) 1x, url(pic@2x.png) 2x);
background-image: -moz-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
background-image: -ms-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
background-image: -o-image-set(url(url(pic.png) 1x,url(images/pic@2x.png) 2x);
}

或者使用HTML代码控制亦可:

3.使用@media控制

实际是判断屏幕的像素比来取舍是否显示高分辨率图像,代码如下:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min–moz-device-pixel-ratio: 1.5), /* 注意这里的写法比较特殊 */
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
#logo {
background-image: url(pic@2x.png);
background-size: 100px auto;
}
}

使用这个的确定就是IE6、7、8不支持@media,所以无效。但是如果你只是支持苹果的RMBP的话,不存在兼容问题,因为MacOS X上压根没有IE!哈哈哈!


关于WY

24岁,是一个专注于web前端与用户体验设计的个人网站,记录博主学习和成长的一个自媒体博客。.[更多]

E-mail:252999979@qq.com
QQ:252999979
用手机阅读《网站如何适配Retina屏幕》

扫描用手机阅读此文
支持Android/iPhone

退出阅读 | 首页