像素 && 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);}}
}