px、em、rem都是计量单位,都能表示尺寸,但是有有所不同,而且其各有各的优缺点。
Px表示“绝对尺寸”(并非真正的绝对),实际上就是css中定义的像素(此像素与设备的物理像素有一定的区别,后续详细说明见文末说明1),利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化,因此一般不用于响应式网站。
em表示相对尺寸,其相对于当前对象内文本的font-size(如果当前对象内文本的font-size计量单位也是em,则当前对象内文本的font-size的参考对象为父元素文本font-size)。使用em可以较好的相应设备屏幕尺寸的变化,但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size,如有遗漏可能会导致错误。
rem也表示相对尺寸,其参考对象为根元素<html>的font-size,因此只需要确定这一个font-size。
表1表示在不同环境下em和rem换算成的px。
表1:em、rem换算px表
以下为实例展示。(只显示相关代码,html设定font-size=15px)
相关代码如下:
结果如图1所示:
图1:测试结果
说明1:以上所述px为css中定义的像素(以下简称css像素),与实际的物理像素是有区别的,早期电脑屏幕的物理像素与css像素相同,但是随着科技的发展,高精度屏幕开始出现在人们的视野中。以iPhone的Retina屏为例,其物理像素与css像素关系见图2。
图2:Retina屏物理像素与css像素关系图
为此移动端浏览器以及某些桌面浏览器引入了devicePixelRatio(DPR)属性,其官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。而css像素=独立像素,由此我们可以得出 devicePixelRatio = 物理像素 / css像素,进而可以推算出该设备上一个css像素代表几个物理像素。例如iPhone的retina屏的devicePixelRatio = 2,那么该设备上一个css像素相当于2个物理像素。了解更多像素相关知识,可以参考:https://github.com/jawil/blog/issues/21。
举报/反馈

前端唠唠嗑

161获赞 66粉丝
一个转行前端的自学历程
关注
0
0
收藏
分享