css中px、em、rem的区别是什么?

CSS中px、em、rem三者的联系与区别

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.jpg

以下为实例展示。(只显示相关代码,html设定font-size=15px)

相关代码如下:

2.jpg

结果如图1所示:

3.jpg

说明1:

以上所述px为css中定义的像素(以下简称css像素),与实际的物理像素是有区别的,早期电脑屏幕的物理像素与css像素相同,但是随着科技的发展,高精度屏幕开始出现在人们的视野中。以iPhone的Retina屏为例,其物理像素与css像素关系见图2。

4.jpg

为此移动端浏览器以及某些桌面浏览器引入了devicePixelRatio(DPR)属性,其官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。而css像素=独立像素,由此我们可以得出 devicePixelRatio = 物理像素 / css像素,进而可以推算出该设备上一个css像素代表几个物理像素。例如iPhone的retina屏的devicePixelRatio = 2,那么该设备上一个css像素相当于2个物理像素。

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css中px、em、rem的区别是什么?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏