本文详细介绍了CSS像素、设备像素、设备独立像素、dpr（设备像素比）和ppi（每英寸像素）之间的区别。在前端开发中，这些概念对于理解和适配不同设备的显示效果至关重要。CSS像素是相对于设备像素的抽象单位，其大小会受到设备像素比和屏幕分辨率等因素影响。设备像素是屏幕上的物理点，不可改变，而设备独立像素是与设备无关的虚拟像素单位。dpr表示设备独立像素与设备像素的比例，ppi则衡量屏幕像素密度。
一、背景
在css中我们通常使用px作为单位，在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素
这会造成一种错觉，我们会认为css中的像素就是设备的物理像素
但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的
当我们做移动端开发时，同为1px的设置，在不同分辨率的移动设备上显示效果却有很大差异
这背后就涉及了css像素、设备像素、设备独立像素、dpr、ppi的概念
二、介绍
CSS像素
CSS像素（css pixel, px）: 适用于web编程，在 CSS 中以 px 为后缀，是一个长度单位
在 CSS 规范中，长度单位可以分为两类，绝对单位以及相对单位
px是一个相对单位，相对的是设备像素（device pixel）
一般情况，页面缩放比为1，1个CSS像素等于1个设备独立像素
CSS像素又具有两个方面的相对性：
- 在同一个设备上，每1个 CSS 像素所代表的设备像素是可以变化的（比如调整屏幕的分辨率）
- 在不同的设备之间，每1个 CSS
最低0.47元/天 解锁文章
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
