奕玖科技 > 新闻中心 > 技术文章

css里em和rem的区别

来源: 奕玖科技 瘦死的猪 | 2023/3/27 11:52:51

EM 和 REM 都是 CSS 中的单位,主要用于设置文本的字体大小。它们两个有着明显的差别,从而适用于不同的情形。

EM 的定义是相对于父元素的字体大小。例如,如果一个元素的父元素的字体大小为 16px,那么它的 1em 就是 16px,2em 就是 32px。这个单位在父元素的字体大小发生变化时也会跟着变化,因此对于实现自适应布局是非常有用的。

20230116638094709862372372.jpg

REM 的定义是相对于根元素(html 元素)的字体大小。所以,无论如何,它都会受到根元素的字体大小的影响,并不会受到父元素的字体大小的影响。例如,如果根元素的字体大小为 16px,那么 1rem 就是 16px,2rem 就是 32px。

从这两个单位的定义来看,EM 和 REM 都可以用来设置文本的字体大小,但是有一些明显的差别:

· 可继承性:EM 可以继承父元素的字体大小,而 REM 只受到根元素的影响。

· 可维护性:EM 的大小随着父元素的字体大小变化而变化,因此如果你想保持一个稳定的大小,你需要维护一些复杂的代码。相反,REM 的大小只受

到根元素的字体大小影响,因此只需要维护一个根元素的字体大小即可。

· 浏览器兼容性:EM 在不同的浏览器中可能会有一些兼容性问题,而 REM 比较现代,因此在现代浏览器中几乎没有兼容性问题。

在实际使用中,EM 和 REM 有着不同的适用场景。

对于一些需要继承父元素的字体大小的场景,例如弹出窗口、提示框等,EM 是一个很好的选择。

而对于一些需要保证字体大小的稳定性的场景,例如页面的布局、字体大小等,REM 是一个更好的选择。

总体而言,EM 和 REM 都是非常实用的 CSS 单位,可以帮助我们实现灵活、简单、稳定的布局效果。在实际使用中,你可以根据不同的场景来选择合适的单位。

栏目导航
相关文章
文章标签
关于我们
公司简介
企业文化
资质荣誉
服务项目
高端网站定制
微信小程序开发
SEO排名推广
新闻动态
行业新闻
技术学院
常见问题
联系我们
联系我们
人才招聘
联系方式
Q Q:24722
微信:24722
电话:13207941926
地址:江西省抚州市赣东大道融旺国际3栋
Copyright©2008-2022 抚州市奕玖科技有限公司 备案号:赣ICP备2022010182号-1