资讯专栏INFORMATION COLUMN

rem与em的使用和区别详解

only_do / 2362人阅读

摘要:和,在自适应制作中最常用的单位。主要区别和单位之间的区别是浏览器根据谁来转化成值理解这种差异是决定何时使用哪个单元的关键。事实上,根据标准,它们是相对于使用单位的元素的字体大小。父元素的字体大小可以影响值,但这种情况的发生,纯粹是因为继承。

rem和em,在自适应制作中最常用的单位。
rem是基于html元素的字体大小来决定,而em则根据使用它的元素的大小决定。二者都是灵活、可扩展的单位,由浏览器转换为像素值,具体取决于您的设计中的字体大小设置。如果你使用值1em或1rem,它可以被浏览器翻译成从16px到160px或其他任意值。

主要区别
em 和 rem 单位之间的区别是浏览器根据谁来转化成px值 理解这种差异是决定何时使用哪个单元的关键。
有一个比较普遍的误解,认为 em 单位是相对于父元素的字体大小。 事实上,根据W3标准 ,它们是相对于使用em单位的元素的字体大小。
父元素的字体大小可以影响 em 值,但这种情况的发生,纯粹是因为继承。 让我们看看为什么以及如何起作用。

rem 单位如何转换为像素值
当使用 rem 单位,他们转化为像素大小取决于页根元素的字体大小,即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。
例如,根元素的字体大小 16px,10rem 将等同于 160px,即 10 x 16 = 160。

em 单位如何转换为像素值
当使用em单位时,像素值将是em值乘以使用em单位的元素的字体大小。

详情戳链接:http://caibaojian.com/rem-vs-...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99729.html

相关文章

  • 【CSS练习】IT修真院--练习3-简单界面

    摘要:任务三一个最简单的移动端页面今天完成的事情运用布局知识跟随设计图进行布局,完成简单并继续学习优化让布局更好适应屏幕变化使用了盒模型及百分比了解区别在中应用图片处理学习明天计划的事情深度思考手机分辨率和网页的区别周末补学任务四计划及简单编写遇 任务三、 一个最简单的移动端页面 今天完成的事情 运用布局知识跟随设计图进行布局,完成简单Demo并继续学习优化. 让布局更好适应屏幕变化(使用...

    MrZONT 评论0 收藏0
  • 前端—初级阶段3(9-12)

    摘要:屏幕可见的最大宽度高度。相对于当前对象内文本的字体尺寸。特点值并不固定会继承父级元素的字体大小。所有未经调整的浏览器都符合。相对于父元素相对于根元素视窗宽度。可视区高度的和中较小的那个。一般情况之下,像素称为与设备无关的像素,简称。 内容 1.Iconfont 字体图标(阿里巴巴矢量字体图标库)原理以及实现 2.Media媒体响应式布局 3.Flex弹性盒子布局 4.移动端适配原理 r...

    rottengeek 评论0 收藏0
  • 彻底弄懂css中单位pxem,<em>remem>区别

    摘要:是相对长度单位。相对于当前对象内文本的字体尺寸。引自手册特点是新增的一个相对单位,根,这个单位引起了广泛关注。目前,除了及更早版本外,所有浏览器均已支持。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 IE无法调整那些使用px作为单位的字体大小; ...

    saucxs 评论0 收藏0
  • 别再被各种单位迷惑:px/em/<em>remem>

    摘要:引自手册是相对长度单位。所有未经调整的浏览器都符合。特点是新增的一个相对单位,根,这个单位引起了广泛关注。目前,除了及更早版本外,所有浏览器均已支持。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。 在他处看到一篇好文章,想记录在自己的学习笔记中,原文作者看到我转载若是介意,联系我立马就删除,附上原文链接:http://www.huolg.net/html5/htm...

    teren 评论0 收藏0
  • (CSS) px,pt,em,<em>remem>区别

    摘要:一绝对长度单位绝对长度单位代表一个物理测量,当输出介质的物理性质是已知的,如用于打印布局。对于打印机和高分辨率的屏幕,一个意味着多个设备像素,因此,每英寸的像素的数量保持在左右。是新增的单位,等于根元素的字体大小。 一、绝对长度单位 绝对长度单位代表一个物理测量,当输出介质的物理性质是已知的,如用于打印布局。这是通过将一个单元锚定到一个物理单元,并将其定义为相对于它的另一个。对于低分辨...

    Lemon_95 评论0 收藏0

发表评论

0条评论

only_do

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<