分辨率

iPhone 6s:1334 x 750
MacBook Pro:2880 x 1800
普通电脑14寸:1920 x 1080

同样尺寸的图片变得模糊

Retina屏 将传统的四个物理像素点模拟一个像素点

解决方案:

  1. <img src="pic.png" srcset="pic@2x.png 2x" /> /*其中@2x.png为后缀的图片就是为Retina准备的*/

CSS中, 有一个属性为 image-set,可以为不同的屏幕配不同尺寸的图片:

  1. img {
  2. background: url(pic.png) 0 0 no-repeat;
  3. background-image: -webkit-image-set(url(pic.png) 1x, url(pic@2x.png) 2x);
  4. background-image: -moz-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
  5. background-image: -ms-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
  6. background-image: -o-image-set(url(url(pic.png) 1x,url(images/pic@2x.png) 2x);
  7. }

网页元素宽度高度有半个像素的概念

传统屏幕中一个px就是一个px,一个物理像素和一个逻辑像素是一一对应的,没有0.5px的概念。
但是四个物理像素模拟一个物理像素的高分辨率屏出现后,这种特性被打破。
当一个网页元素的宽度或高度不是整数,而出现小数位长度的时候,四个像素组成的一个逻辑像素中,上面两个像素被渲染为黑色,而下面两个像素并没有被渲染,从而下面两个像素组成的一条线就呈现为一条白色亮线,从逻辑上讲,它仅高0.5px。

解决方案:

避免小于0.5px单位的长度出现,当长度大于0.5px的时候,就会完全占满四个物理像素组成的一个逻辑像素。因此,尽可能在一些颜色与邻近元素对比度大的元素中,采用绝对长度单位px,而不使用% em rem pt等非绝对长度单位。不过,Retina屏为更小精度的定位提供了可能,你甚至可以采用0.4px这样的方法来专门为Retina屏进行一些适配。

元素变小,错位

高分辨率的屏幕,会使得在普通分辨率下看上去正常的尺寸变的比较小。传统屏幕上显示3行文本,在高分辨率屏幕上则一行就显示完了,显得很丑。

解决方案:

采用屏幕适配来为不同宽度的屏幕显示不同的效果。一般而言,能够采用retina屏的电脑,都已经升级到高版本的系统,自带的浏览器版本也比较高,都支持html5的特性,因此,我们在设计制作网页的时候,需要专门为这帮高端用户设计多余的页面元素,使用responsive css的方法,展示给他们更多的内容,从而保证在高分辨率屏幕上和普通分辨率屏幕上都能很好的显示。