「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」。
题外话
打工人的周末真的就是说没就没啊，明天睁眼睛又是一个坚强的打工人了。进入正题~
上一篇介绍了设备独立像素，这一片接着往下说
设备独立像素
1.设备像素比
设备像素比
device pixel ratio简称dpr，即物理像素和设备独立像素的比值。 在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr。如下图：
在
css中，可以使用媒体查询min-device-pixel-ratio，区分dpr：
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ }
当然，上面的规则也不是完全成立，也有例外情况。比如，iPhone 6、7、8 Plus的实际物理像素是1080 x 1920，在开发者工具中我们可以看到：它的设备独立像素是414 x 736，设备像素比为3，设备独立像素和设备像素比的乘积并不等于1080 x 1920，而是等于1242 x 2208。
在实际中，手机会自动把1242 x 2208个像素点塞进1080 * 1920个物理像素点来渲染，我们不用关心这个过程，而1242 x 2208被称为屏幕的设计像素。我们开发过程中也是以这个设计像素为准。
实际上，从苹果提出视网膜屏幕开始，才出现设备像素比这个概念，因为在这之前，移动设备都是直接使用物理像素来进行展示。
后来，Android同样使用了其他的技术方案来实现DPR大于1的屏幕展示方案。和iphone提出的原理很相似。由于Android屏幕尺寸非常多、分辨率高低跨度很大，不像苹果只有它自己的几款固定设备、尺寸。所以，为了保证各种设备的显示效果，Android按照设备的像素密度将设备分成了几个区间：（图源网络）
当然，并所有的Android设备都严格按照上面的分辨率出厂使用，每个类型可能对应几种不同分辨率。所以，每个Android手机都能根据给定的区间范围，确定自己的DPR，从而实现是同样的展示效果。
2. 移动端开发
在iOS、Android和React Native开发中样式单位其实都使用的是设备独立像素。
iOS的尺寸单位为pt，Android的尺寸单位为dp，React Native中没有指定明确的单位，它们其实都是设备独立像素dp。
一般来说，各个公司的UI设计为了兼容多款手机，给出的设计稿一定是按照设备独立像素设计出来的。
3.web开发
在写CSS时，我们用到最多的单位是px，即CSS像素，当页面缩放比例为100%时，一个CSS像素等于一个设备独立像素。
在日常开发中，为了同时兼容Android和ios的手机屏幕，我们多采用vw来写css样式。
祝所有打工人周末愉快，明天见~
