本文探讨了rem单位在移动端适配中的应用，解释了物理像素、逻辑像素与设备像素比（DPR）的关系。通过示例说明了在不同设备上CSS像素与设备像素的区别，以及为何在手机端可能出现字体大小变化的问题。同时，介绍了通过JavaScript和CSS媒体查询动态设置rem的两种方法，推荐使用动态JS设置以实现更好的适配效果，如手机淘宝的flexible方案。
rem是个单位，单位大小由它第一代祖先font-size的大小决定rem的大小。
了解字体大小的同时我们要知道像素是什么东西。
像素是屏幕的组成元素，我们看到屏幕上的内容都是由一个个小颗粒构成的，而这些小颗粒我们叫做物理颗粒。
设备的像素比（简称DPR）
它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：
DPR=物理像素/逻辑像素那么逻辑像素是什么呢？
逻辑像素是CSS像素，CSS样式代码中使用的是逻辑像素，比如font-size使用的就是逻辑像素。
如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px*960px，而逻辑像素数为320*480px。因此，需要使用大约4个物理像素来显示一个CSS像素。
注意CSS中的1px并不等于设备的1px，在web端中1px是等于电脑屏幕的1物理像素，所以有一种错觉，觉得CSS中的像素就是设备的物理像素，但是却不是这样的，css中的像素单位只是一个抽象单位，在不同的设备和不同环境下，css中的1px所代表的设备物理像素是不同的。
看到这里差不多就了解为什么我明明设置了font-size:12px;却在手机端上变小了，这是因为DPR的原因，在电脑上的DPR是1，但是换算到手机端上的DPR可能就是2或者3。
那么如何获取到设备的DPR呢？
第一种是在JavaScript中，通过window.devicePixelRatio来获取；
第二种是在css中，可以通
最低0.47元/天 解锁文章
1012
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
