webAPP设计技巧之Retina屏幕设计常识介绍

苹果公司最近发布了一款Retina 5K显示屏，5120 x 2880的分辨率，1470万像素的imac电脑。超级棒的最美的一款产品。

然而我们在设计webAPP的时候，尺寸都是以iphone5s的尺寸（640*1136）为基础来设计的。目前市面上的主流手机基本都是Retina屏幕的。

如果按照以前我们做网页设计时候的切图方式或者是设计方式来弄webAPP设计，肯定不行。因为我们设计东西在Retina屏幕下显示肯定会是真。

所以，今天跟随25学堂来了解下Retina屏幕的基础知识。

Retina，中文直译为视网膜。众所周知，最先采用Retina屏幕的苹果设备是iPhone 4，其屏幕每英尺像素达到326ppi。即每英寸可显示326像素。而300 ppi是人类所能看到的分辨率的极限数值。

@2x是Retina图标的标准命名方式。为什么我们在设计APP的时候要切图命名的格式是这样。现在应该明白了吧。 也理解为是原图的2倍的意思。

Retina屏幕发布的时间是2012年，从此Retina屏幕设计走入我们的眼前。

看完上面的这张图片在Retina屏幕上的显示效果。

第一种解决方案：直接加载2倍大小的图片。

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

<img src=”pic.png” height=”100px” width=”200px” />

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

<img src=”pic.png” height=”100px” width=”200px”/>

$(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);

});

}

});

第二种解决方案：background背景图标来设定。

比如css3的一个背景属性：background-size。记住应该切2倍以上的图片，然后缩小，这样才能保证网页上的图标显示在 Retina上显示清楚。

这是在webAPP上面针对图片的处理技巧。

而以iphone6作为设计稿的时候，我们的切图命名方式如下：

iPhone6：命名：Default-375w-667h@2x.png   分辨率：750*1334

iPhone6plus 命名：Default-414w-736h@3x.png  分辨率：1242*2208

未经允许不得转载：物联网的那些事 - Totiot » webAPP设计技巧之Retina屏幕设计常识介绍