设备像素（物理像素/像素分辨率）
- 显示器的最小物理单位（对于一个显示器来说是固定的）；
- 以手机屏幕为例，iphonex 像素分辨率为 1125x2436，是指屏幕横向能显示 1125 个物理像素点，纵向能显示 2436 个物理像素点；
- 通常说的 4K 显示屏指的是 4096x2160；
设备独立像素（dips）
- 比如我们偶尔会说 “电脑屏幕在 2560x1600 分辨率下不适合玩游戏，我们把它调为 1440x900”，这里的”分辨率”（非严谨说法）指的就是设备独立像素；
- 可在控制台通过 window.screen.width、window.screen.height 查看；
- 另外，平时我们所说的 iphoneX 的逻辑分辨率 375x812 指的就是设备独立像素，chrome 检查元素模拟调试手机设备时显示如 375x667 和 320x480 都是设备独立像素；
- 一个设备独立像素可能包含多个物理像素，包含的越多，显示越清晰；
CSS 像素
- 在页面不缩放的情况下，1px的CSS像素 === 1设备独立像素
- 页面放大 200% 时，页面的设备独立像素依旧不变，放大的是CSS像素，但是此时 CSS 像素与设备独立像素的关系变化了，1px === 4独立像素（宽x2，高x2）；
PPI：每英寸的物理像素数
- 以尺寸为 5.8英寸（屏幕对角线长度）、分辨率为 1125x2436 的 iphonex 为例
- ppi = Math.sqrt(11251125 + 24362436)/5.8，值为 463ppi（屏幕对角线上的像素点/对角线的英寸数）；
devicePixelRatio 像素比
- devicePixelRatio 指的是物理像素和设备独立像素的比，即 1 独立像素由多少物理像素渲染；
- dpr（device pixel ratio）：设备像素比，设备像素/设备独立像素，代表设备独立像素到设备像素的转换关系，在 JS 中可以通过
window.devicePixelRatio获取； - window.devicePixelRatio = 物理像素/设备独立像素（dips）；
高清屏部分图片失真
- 一些像素比较低的图片，在普通显示屏上可以显示，但在高清屏上会出现模糊的现象；
- 原因是：假如有一张宽高为100px的图片，在不同屏幕上呈现的都是100px设备独立像素的图片，但对于高清屏来说，100px独立像素所需的物理像素比普通屏多得多；
- 1px独立像素所含的物理像素越多，屏幕越高清；
- 假如普通屏100px独立像素需要1W个像素点，高清屏得3W个, 但是图片本身包含的像素点可能远远达不到3W，这时候，图片就会拉伸自己的像素点，所以看起来就显得模糊了；
- 解决办法是：高清屏上图片的宽高设小一点，这样所需的物理像素就不用那么多了，屏幕显示图片所需的物理像素越接近图片，图片越高清；
矢量图永不失真
- 因为矢量图形不是一个个像素点显色的，而是通过给定的坐标数据进行绘制的，所以不会失真；
打赏作者
您的打赏是我前进的动力
微信
支付宝
transform全解
上一篇
评论
