Retina顯示屏-揭祕移動端的視覺稿一般會設計爲傳統PC的2倍

1、Retina顯示屏簡介

retina：一種具有超高像素密度的液晶屏，一樣大小的屏幕上顯示的像素點由1個變爲多個，如在一樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變爲4個。

retina顯示屏只是高清顯示屏的一種

隨着蘋果的 retina顯示屏推出以來，不少廠商也開始推出本身的高清顯示屏，如三星手機、魅族手機、小米電視機等，而目前市場的移動設備大都是高清顯示屏了，其實它們的顯示原理都是來自蘋果的 retina顯示屏。

如小米3的高清顯示屏，5英尺的屏幕下分辨率高達1920*1080。

1920 x 1080全高清分辨率至關於全高清電視機的1920 x 1080分辨率，顯示精度高達441PPI，較小米手機2提升28%，不管視頻、網頁仍是遊戲都史無前例的清晰。

 

2、高清顯示屏下圖片變模糊

瞭解高清顯示屏的原理後，咱們能夠想象有2張圖片在不一樣的2部手機中，一部是普通顯示屏，一部是高清顯示屏，在一樣大小的屏幕上，高清顯示屏中的位圖會被放大，圖片會變得模糊。

如retina顯示屏下，左邊的圖片變模糊了，緣由是Retina 顯示屏呈現的對比度是普通顯示屏的 4 倍，顯示的像素點由1個變爲4個，也就是說圖片被放大了一倍，從而變得模糊。

因此在高清顯示屏中的位圖被放大，圖片會變得模糊，所以移動端的視覺稿一般會設計爲傳統PC的2倍。

 

3、前端的應對方案

設計稿切出來的圖片長寬保證爲偶數，並使用backgroud-size把圖片縮小爲原來的1/2

//例如圖片寬高爲：200px*200px，那麼寫法以下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值爲原來的1/2，例如視覺稿40px的字體，使用樣式的寫法爲20px

.css{font-size:20px}

//image-set設計Rentina背景圖

image-set,webkit私有屬性，也是CSS4的屬性，爲解決Rentina屏幕下的圖像而生。

.css {

    background: url(images/bg.jpg) no-repeat center;

    background: -webkit-image-set(

    url(images/bg.jpg) 1x,     //支持image-set普通屏

    url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan

}

 

4、如何區分普通顯示屏和高清顯示器

經過devicePixelRatio的數值來區分普通顯示屏和高清顯示器，

 devicePixelRatio ，它是設備上物理像素和設備獨立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/設備獨立像素

例如iPhone4S，分辨率爲：960×640，取屏幕寬度計算，物理像素640px，設備獨立像素320px，那麼，devicePixelRatio 值爲 640px / 320px = 2，又如iPhone3，計算出來的 devicePixelRatio 值爲 320px / 320px = 1

那麼，經過計算 devicePixelRatio 的值，是能夠區分普通顯示屏和高清顯示器，當devicePixelRatio值等於1時（也就是最小值），那麼它普通顯示屏，當devicePixelRatio值大於1(一般是1.五、2.0)，那麼它就是高清顯示屏。

 

5、例子實戰

用手機掃描下面的二維碼，看看本身手機的 devicePixelRatio 值， 掃描後，點擊"肯定"或者"好"，可看到不一樣分辨率下的喬布斯~

devicePixelRatio值分別爲1.0、1.五、2.0對應下圖，那麼你是若是1.5及以上，那麼恭喜，你的手機顯示屏是高清分辨率的；若是是1.0，呵呵，你懂得~~~

 

核心代碼：

CSS:

.img{border:none;width:126px;height:138px;margin: 60px auto; background-size:100% auto;background-repeat:no-repeat;background-image: url(images/image1x.jpg);} 

@media(-webkit-min-device-pixel-ratio:1.5){

.img{background-image: url(images/image1.5x.jpg);}

} 

@media(-webkit-min-device-pixel-ratio:2){

.img{background-image: url(images/image2x.jpg);}

}

 

JS:

alert("devicePixelRatio:"+window.devicePixelRatio);

 

案例演示