像素具有上下文环境
像素是个虚拟概念，在不同的上下文环境里有不同的含义。
1px是一个相对概念，浏览器视窗大小(画稿大小）如果设置为手机设备宽度像素（逻辑像素），则1px=1逻辑像素。但1个逻辑像素可以占用1个、2个或者3个、4个物理像素。这样就是为什么移动端会出现1px问题。在2倍屏下，0.5px就可以表达1倍屏下的1px。
简单理解逻辑像素，是软件能达到的像素，相当于屏幕能达到的展示的大小程度，手机屏幕越大，逻辑像素越大；它为CSS中的宽度、高度、媒体查询和meta 的viewport 中的device-width提供参照物作用。相当于逻辑像素衡量手机屏幕大小。
物理像素指的是通常我们说的手机设备的分辨率，设备像素比=物理像素/逻辑像素，设备像素比越高则屏幕显示越清晰，相当于一个逻辑像素中由多个物理像素组成。物理像素衡量手机屏幕清晰度。
移动端出现的1px问题，根本原因在于：比如我们的设计稿是基于750的物理像素进行设计的，想象在这个画稿上有一个一个1px大小的物体，它从750的画稿上挪到375的画稿上，物体大小不会变化，但从视觉上来说物体变大了一倍，要适配375的画稿需要将1px变成0.5px。
也就是说css像素1px是个相对的概念，相对于画稿的逻辑像素而言的，当画稿的大小定下来之后，css像素的大小也就确定了，换到其他画稿上，要使我们的div等大小成比例自适应则需要成比例缩小或放大div的大小。
结合postcss原理，设置基础宽度，例如750，实际css中的px会被转换成和实际屏幕宽度匹配的数值，如(16px/750px) * 375px(实际屏幕宽度——逻辑像素) = 8px。（这里只是举个例子，视窗大小vm在等于device-width时等同于逻辑像素）。可以看到在750px上的逻辑像素大小放到375px上是需要缩小一倍数值的，750上的逻辑像素是375逻辑像素的750/375 = 2 倍大小。而1px已经是最小单位，postcss不会对其做转换。所以相当于（750/375）= 2 个 375px上的逻辑像素大小。所以看起来比实际的375px上1px要粗两倍。
综上，移动端尺寸自适应与dpr无关。 这样是可以理解的了。
