物理像素

又称device pixels(dp)设备像素，这是设备出厂时就既定的（注意这可不是分辨率，分辨率的设置反而属于逻辑像素）其单位为pt

逻辑像素

与之对应的用于表示图片尺寸、可时刻改变的像素尺寸，称之为逻辑像素其单位为px

浏览器中一切的长度单位最终都会换算成px来用于渲染页面，虽然px称之为像素，但实质上其只是一个逻辑像素——CSS像素 CSS2.1规范中建议，CSS的1px所占用的尺寸为1英寸屏幕像素中放下96px，而这个96像素/英寸的比值，实质上其单位就是ppi(pixels per inch)，也就是接下来的像素密度的概念

像素密度

物理像素与逻辑像素的比值，就称之为像素密度，又称设备像素比

浏览器提供APIwindow.devicePixelRatio可供查看

实际开发中的问题

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Document</title>
  7. </head>
  9. <body>
  10.   <div>
  11.     <p></p>
  12.   </div>
  14.   <style>
  15.     div {
  16.       height: 100px;
  17.       border: 1px solid black;
  18.     }
  19.     p {
  20.       width: 100%;
  21.       height: 100%;
  22.       margin: 0;
  23.       background-color: red;
  24.     }
  25.   </style>
  26. </body>
  28. </html>

image.png
这是HTML的页面截图，看起来没什么问题，但当我们仔细看红色块右侧发现有细微的间隙，如下图
image.png
这就是逻辑像素计算时发生冲突的地方
通过window.devicePixelRatioAPI可以查看到我此时的像素密度为1.4375，而当我缩放屏幕使设备像素比接近整数时，是没有间隙的
以上就是其在实际开发中不可避免的问题，作为开发者，由于这个问题与用户的设备相关，我们无法从根源解决问题，只能尽可能进行避免