前端开发之retina屏幕

像素 && ppi

首先先说一下pixel(picture element)，显示图像的最小单位，有多个带色彩的像素点组成的整体就是一张图像。然后再说一下ppi(pixel per inch)这个概念，其实就是在每英寸显示的像素数。

设备像素 && 逻辑像素 && dpr

设备像素(device independent pixels): 设备屏幕的物理像素
逻辑像素(CSS pixels): CSS像素

CSS样式和几乎所有的javascript设置html DOM 元素都使用CSS像素，因此实际上从来用不上设备像素，唯一的例外是screen.width/height。

dpr = 设备像素 / 逻辑像素

随着技术的发展，移动设备的屏幕像素密度越来越高。从iphone4开始，苹果公司推出了retina屏幕。。iphone4的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于是dpr = 2。dpr也有对应的javascript属性window.devicePixelRatio。以iphone5为例，iphone5的CSS像素为320px568px，dpr是2，所以其设备像素为640px1136px

前端开发

现在的iphone 6plus的dpr是3，所以UE出的设计稿宽都是414 * 3的，而我们在开发的时候都是把UE的字体、块宽和高等标注同时 / 3，这样就能和设计稿保持一致。当我们截屏iphone 6plus浏览器中访问开发好的网页，放到ps中进行测量，和设计稿中一致。

在这里一定要注意，在retina屏幕中显示图片的时候，为了保证不失真模糊，图片的尺寸必须是图片的显示尺寸 * dpr，这样在retina屏幕中被放大dpr倍后才会不失真。

例子

注意以下两种实现方式都有问题，显示单边1px，在retina屏幕上会有一条细缝，4边1px，在retina屏幕上会存在position定位从块元素的padding开始定位，会覆盖2条边，另外2条边则多出来了

单边1px

codepen实例

以下代码实现的是底部1px变换，其原理: 使用伪元素after绝对定位到块元素底部，宽度100%，高度1px，在Y轴上缩放1倍，记住要设置背景色。

html

I'm box 1px bottom border

css

.box-1px-bottom-border {
  position: relative;
  width: 100px;
  height: 100px;
  background: #0f0;
  &:after {
    content: ' ';
    display: block;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 0;
    height: 1px;
    background: #f00;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform: scaleY(.5);
                transform: scaleY(.5);
    }
  }
}

四边1px边框

codepen实例

I'm box four side border

css

.box-four-side-border {
  width: 100px;
  height: 100px;
  background: #00f;
  position: relative;
  &:after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #f00;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
      width: 200%;
      height: 200%;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scale(.5);
              transform: scale(.5);
    }
  }
}