单位问题

rem、em、rpx 等相对单位

• rem：相当于 html 根元素的字号大小（font-size）
• em：相对于父级元素的字号大小
• rpx（微信小程序）：屏幕宽度始终认为是为 750rpx。如在 iPhone 6 中，屏幕宽度为 375px，则在 iPhone 6 中1rpx = 0.5px

移动端 1px 问题的解决方案？

问题描述：1px 问题是指在高分辨率屏幕下，由于设备像素比 DPR > 1，导致所有设置的 px 单位都会显示的更大，对于 1px 等极小的宽度更为明显 解决方案：

• viewport 缩放：设置 <meta name="viewport" content="initial-scale=0.5">，让 1px 等于物理 1px
• transform 缩放: transform: scaleY(0.5)
• 伪元素 + transform 缩放：使用 ::after 来绘制 border，再进行缩放。这样不会影响其他内容和布局

css 像素、设备像素、设备独立像素、DPR、PPI 的关系

css 像素

css 像素是一种抽象单位，在不同的设备或不同的环境（缩放等级）下会有所不同。

css 像素的单位 px 是一个相对单位，当 PPI 或 DPR 变化时，1px的大小会发生改变

设备像素

即设备的物理像素，一块屏幕的物理像素是不变的，单位是pt。

设备独立像素

与设备无关的逻辑像素，是一个总体概念，包括 css 像素。

一个设备独立像素可能包括一个或多个物理像素点，越多屏幕越清楚。

DPR

设备像素比，定义为 设备像素 / 设备独立像素

• 当 DPR = 1 时，用 1 个设备像素（1 _ 1）显示 1 个 css 像素（1px _ 1px）
• 当 DPR = 2 时，用 4 个设备像素（2 * 2）显示 1 个 css 像素

PPI

每英寸像素，表示每英寸包含的像素点数目，即像素密度。数值越高，屏幕越清晰

总结

无缩放情况下：

• 1 个 css 像素 == 1 个设备独立像素
• 1 个设备独立像素 == 1 个设备像素（PC 端以及移动端的标准屏幕下）