像素单位（px pt rem em rpx）

px

px是css像素，是一个虚拟像素，是一个相对单位
例如在两个不同的设备上，1px对应的物理、设备像素是不一样的

pt

pt是物理像素，它是一个绝对单位，设备出厂就固定的，不会改变
通常我们说的显示器分辨率，并不是真正的物理分辨率，而是桌面设置的显示分辨率

px与pt

css像素px是相对的，而物理像素pt是设备的分辨率，我们以iphone6来举例

iphone6的实际设备像素是750x1334，而它的逻辑像素，也就是视觉像素是375x667，所以这就出现了一个比例，设备像素比（Device Pixel Ratio DPR）,一个设备的物理像素与逻辑像素之比

也就是说，一个逻辑像素的渲染其实是占用了两个物理像素，这样在不同分辨率的屏幕上，1px所展示的大小就基本上是一致的了。但这也出现了一个问题，不同分辨率本就是为了展示更高清的图片，如果展示为一样的，就失去了高分辨率的意义，因此出现了2x、3x倍图，高清屏幕使用更高清的图片

关于获取逻辑像素，我们可以使用screen.width和screen.height来获取屏幕的宽高，也可以使用window.devicePixelRatio来获取设备像素比

1px边框问题

由于物理像素pt与css像素px是相对的，所以在例如iphone6中，1px的边线就会使用2pt来渲染，无法实现真正的1像素

em

em是一个相对单位，相对于当前对象的文本字体尺寸。

如果未设置尺寸，则会使用浏览器默认字体大小，如果设置字体为16px，则1em就等于16px。em是相对于父级的，因此只要改变父级字体大小，子级就会自动变化。

rem

rem是相对于根元素字体大小，不会出现em中改变父级影响子级的问题。
移动端适配过程中，一个css像素对应不同数量的物理像素，因此不能写死px，而是要根据设备不同，显示不同的px，也就是动态计算，因此可以使用rem，不同分辨率设置不同的根字体大小，想对应的1rem也就对应了不同的px。
由此我们写一下思路

var 根元素font-size = 实际设备宽度 / 开发设备宽度 * 开发时根元素字体大小

假设我们为iphone6适配，它是375px，我们设置开发字体是100px

document.documentElement.style.fontSize =(document.documentElement.offsetWidth/375)*100 + 'px' ;

如果设计稿是750，是物理像素的话，那么我们可以再除以2，这样就可以得到实际的px了。再除以100就是rem，这样比较方便。

rpx

rpx是微信小程序引入的像素单位，小程序编译中会对rpx与px进行换算，换算的基准是375物理像素。也就是说在375物理像素的屏幕下，1rpx=1px

拿iphone6来举例，它是750物理像素的，因此1rpx=375/750 = 0.5px

参考文章：
https://blog.csdn.net/u014465934/article/details/97040694