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中,可以通