栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

使用rem时应该注意什么?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用rem时应该注意什么?

看了下 绝对单位 和 相对单位。

em 是相对元素本身的 font-size 的相对单位,比如元素本身的 font-size 是 14px,那么 1.2em = 1.2 * 14px = 16.8px。注意,是相对元素本身的 font-size,会随着元素的 font-size 的改变而改变。

rem 是 root em 的缩写,相对根元素的 font-size 相对单位,比如根元素的 font-size 是 14px,那么 1.2rem = 1.2 * 14px = 16.8px。注意,是相对根元素的 font-size,不论元素处于什么位置,乘法的基数都是 14px(根元素的 font-size)。

em 一半用于设置元素的 padding, margin, border-radius 等。
rem 一半用于设置元素的 font-size。
px 一半用于设置 border。

如果用 em 设置 font-size 很容易会出现意想不到的问题。比如嵌套的 div。

// cssdiv {  font-size: 0.8em;}
<!--html--><div>div1<div>div2</div></div>

上面的代码,假设根元素用的是默认值 16px,那么第一个 div 的字体是 0.8 * 16px = 12.8px,第二个 div 的字体会先继承第一个 div 的 font-size = 12.8px,然后再乘以 0.8,0.8 * 12.8px = 10.24px,就会导致两个 div 的字体不一样大。

如果使用的是 rem,那么基数都是 16px,两个 div 的大小都是 12.8px。


先到这里,后续再补充。
不想敲了,直接放链接:https://www.yuque.com/u115242/pt75h6/our3wx

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/379475.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号