为了搞清楚这个问题, 我们需要先了解几个概念

# 设备独立像素

以 iPhone6/7/8为例，这里我们打开 Chrome 开发者工具 我们可以看到iPhone6/7/8 是 375*667 这就是设备的独立像素 也叫做css像素和逻辑像素,既有

• 设备独立像素 = CSS 像素 = 逻辑像素

# 物理像素

物理像素可以理解为手机屏幕的分辨率,比如 我们说iPhone7 的分辨率是 1334 x 750，这里描述的就是屏幕实际的物理像素
物理像素，又称为设备像素。显示屏是由一个个物理像素点组成的，1334 x 750 表示手机分别在垂直和水平上所具有的像素点数。通过控制每个像素点的颜色，就可以使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位为pt。 设备像素 = 物理像素

# 设备像素比

有了上面两个概念，就可以顺理成章引出下一个概念。DPR（Device Pixel Ratio） 设备像素比，这个与我们通常说的视网膜屏（多倍屏，Retina屏）有关。 设备像素比描述的是未缩放状态下，物理像素和设备独立像素的初始比例关系。
简单的计算公式：物理像素 / 设备独立像素
在我们电脑上这个比值一般为1 即我们在页面上写1px(css像素)在页面上呈现的就是1pt (物理项目)

# 手机上DPR一般并不为1

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论

# 1px 出现的原因

因为手机上的DPR的值并不为1, 当UI的设计稿上有一个1px的边框时,实际上是物理像素是1px 如果设备的DPR=2,我们根据计算得出对应的css像素是0.5px
但大部分浏览器会吧0.5px 当成1px 通过计算显示到页面上的物理像素就成了2px 如果设备的DPR=3 那显示到页面上的物理像素就成了3px 。这就是1px为什么在不同设备上变粗的原因