最近在建设网站时，需要考虑到移动端的适配。在这过程中，我发现了自己的一个问题，我一直没分清楚CSS的像素单位，px、em、rem ，它们之间的关系和区别是什么？
想要弄明白这些前，需要先了解一些概念。
CSS像素和物理像素
CSS 像素也叫做逻辑像素，直觉像素，这个概念大部分情况下是为前端开发者提供的，通俗的说它是前端程序员眼中的像素，它是个相对的概念，比如在开发工具中 iPhone12 Pro 的CSS像素为 390*844 px，那么我在设置一个图片的页面宽度时，390px的宽度就会占满整个宽度。
物理像素(pt)是个物理的长度单位，指 1/72 英寸。电子屏幕的显示点，打印机的墨点，这都是设备的物理像素。这就是个绝对的概念了，它们被制造出来的时候已经确定了的。
当我们在PC端屏幕足够大的时候，1px的物理像素和 CSS 像素可能是一样的，它们的比值是1。但有时我们会设置屏幕的分辨率，显示的内容会变大。屏幕的物理像素并没有改变，但CSS像素改变了。
手机端的分辨率就非常高，如果还维持1：1的比例，显示出来的文字内容就会非常小了。所以物理像素和 CSS 像素就不能是一一对应的关系。如果一个CSS像素对应3个物理像素，那么设备像素比（DPR）就是物理像素与逻辑像素的比值，就是3，也就是常说的3倍屏。
px、em、rem 、rpx 这些像素单位的区别又是什么？
- px 是固定的像素，一旦设置了就无法因为适应页面大小而改变。
- em 是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。
- rem 是相对于根元素，是灵活的、可扩展的单位。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。这样就意味着，只需要在根元素确定一个参考值，就可以灵活的使用了。
默认情况下，html元素的font-size为16px，所以：
rem = 16px- em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。例如需要适配 iPhone 和 iPad 等分辨率差别比较挺大的设备，使用rem就更加合适。
- rpx 是微信小程序中引入的新的单位，它是以375个物理像素为基准，当屏幕宽度为375物理像素时， 1rpx = 1px。
