像素 && 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

<div class="box-1px-bottom-border">I'm box 1px bottom border</div>

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实例

<div class="box-four-side-border">I'm box four side border</div>

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);}}
}