恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【前端技术】网页如何适配Retina屏幕
0.0°
2014-08-28 原创文章 教程 原作者: 原作者 举报 55670 171 78 18

前言

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

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

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

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

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

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

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

正文

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

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

<img src="pic.png" height="200px" width="300px" />

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

<img class="pic" src="pic.png" height="200px" width="300px"/>

<script type="text/javascript">

$(document).ready(function () {

if (window.devicePixelRatio > 1) {

var images = $("img.pic");

images.each(function(i) {

var x1 = $(this).attr('src');

var x2 = x1.replace(/(.*)(.w+)/, "$1@2x$2");

$(this).attr('src', x2);

});

}

});

</script>

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代码控制亦可:

<img src="pic.png" srcset="pic@2x.png 2x" />

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!哈哈哈!

       OK,本文到这里就结束了,介绍了上面的三个办法大家可以各有取舍的使用吧~

更新:2014-08-28

下载
收藏

171人已收藏

JasonChen

前端学徒

  • 8

    作品

  • 120

    粉丝

  • 23

    关注

  • 【魅族主题】静魅
  • 【原创PSD分享】iPhone6
  • 【UI练习】掌上校卡
  • 【原创PSD分享】OPPO Find7

    猜你喜欢

      2014-08-28 原创文章 教程 原作者: 原作者 举报 55670 171 78 18

      【前端技术】网页如何适配Retina屏幕

      0.0°

      你确定要举报【前端技术】网页如何适配Retina屏幕

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年08月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      78
      171
      18

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录