概念
CSS像素:适用于web编程,指的是我们在样式代码中使用到的逻辑像素,是一个抽象概念,实际并不存在
物理像素:物理像素,设备能控制显示的最小单位,我们常说的1920×1080像素分辨率就是用的设备像素单位。
设备独立像素:与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素。
DPR(window.devicePixelRatio):是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例, 公式表示就是:window.devicePixelRatio = 物理像素 / dips
大部分浏览器devicePixelRatio值为1,当它们移动到视网膜类似设备时候,可能就会遇到问题。
当设备像素比为1:1时,使用1(1×1)个设备像素显示1个CSS像素;
当设备像素比为2:1时,使用4(2×2)个设备像素显示1个CSS像素,1px代表2个物理长度;
当设备像素比为3:1时,使用9(3×3)个设备像素显示1个CSS像素,1px代表3个物理长度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.onePixel {
position: relative;
}
.onePixel:after {
display: block;
width: 100%;
height: 0;
content: '';
border-bottom: 1px solid black;
}
@media (-webkit-device-pixel-ratio: 2),(device-pixel-ratio: 2) {
.onePixel {
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
}
.onePixel2 {
position: relative;
}
.onePixel2:after {
display: block;
width: 100%;
height: 0;
content: '';
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<div class = "onePixel"></div>
<br/>
<br/>
<br/>
<div class = "onePixel2"></div>
</body>
</html>