分析理解——css中单位px和em,rem的区别

① px是相对长度单位,它是相对于显示器屏幕分辨率而言的

优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

② em也是相对长度单位,EM是相对于父元素来设置字体大小的。如果当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

优缺点:em的值并不是固定的,它会继承父级元素的字体大小。

③ rem是CSS3新增的一个相对单位,REM是相对单位,是相对HTML根元素

这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大
小,又可以避免字体大小逐层复合的连锁反应。
### px px即像素(Pixel),是相对于显示器屏幕分辨率而言的相对长度单位。其特点是固定的像素,一旦设置了就无法因为适应页面大小而改变。IE无法调整那些使用px作为单位的字体大小,而国外的大部分网站能够调整字体大小的原因在于其使用了emrem作为字体单位。此外,虽然Firefox能够调整pxemrem,但96%以上的中国网民使用IE浏览器(或内核)[^1][^3]。 ### em em是相对长度单位,相对于当前对象内文本的字体尺寸。如果当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(1em = 16px)。em的值并不是固定的,且会继承父级元素的字体大小。它是相对于其父元素来设置字体大小的,一般以`<body>`的“font - size”为基准。不过这也存在一个问题,进行任何元素设置时,都有可能需要知道其父元素的大小。为了简化font - size的换算,可以在css中的body选择器中声明font - size = 62.5%,这样em值变为16px * 62.5% = 10px,只需将原来的px数值除以10,然后换上em作为单位即可[^1][^3][^5]。 ### rem remCSS3新增的一个相对单位(root em,根em)。使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素`<html>`。这个单位集相对大小绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法是多写一个绝对单位的声明,这些浏览器会忽略用rem设定的字体大小[^1][^2][^4]。 ### rpx 文档中未详细提及rpx的具体信息,但从标题可知它也是CSS单位之一,通常rpx(responsive pixel)是微信小程序独有的尺寸单位,它可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,750rpx = 375px,1rpx = 0.5px。 ### 区别总结 - **固定与相对**:px是固定像素单位emremrpx是相对单位。 - **相对对象**:em相对于父元素;rem相对于根元素`<html>`;rpx在微信小程序中相对屏幕宽度;px与屏幕分辨率相关。 - **浏览器兼容性**:px兼容性好,所有浏览器都支持;rem除IE8及更早版本外,其他浏览器均支持;em浏览器兼容性也较好;rpx是微信小程序内使用,有特定使用场景。 - **应用场景**:px适用于需要固定尺寸的元素;emrem更适用于响应式布局;rpx适用于微信小程序开发。 ```css /* 示例代码 */ html { font-size: 16px; /* 设置根元素字体大小 */ } body { font-size: 16px; /* 父元素字体大小 */ } .px-example { font-size: 20px; /* 使用px单位 */ } .em-example { font-size: 1.2em; /* 使用em单位,相对于父元素 */ } .rem-example { font-size: 1.5rem; /* 使用rem单位,相对于根元素 */ } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值