彻底弄懂响应式设计中的em和rem

时间:2024-01-15 09:33:44

前一阵子在响应式开发中遇到了em和rem的问题,也上网搜过一些文章,篇幅很长,也没有仔细看,今天来总结一下。

rem是指:根元素(root element,html)的字体大小,

em是指:父元素的字体大小。

下面看一个例子:

  

div{
font-size: 30px;
}
div span{
font-size: 2em;
} <div>
div下的元素
<span>span里的元素</span>
</div>

  在chrome中显示:

彻底弄懂响应式设计中的em和rem

也就是说,span里的文字大小是根据父元素div的font-size大小设置的。

测试rem的代码和运行结果就不贴上来了

body{

  font-size:16px;

}

p{

  font-size:2rem;/*此时p元素中的文字size为32px;

}

可以设置body的font-size为62.5%,也就是10px(比如浏览器默认字体大小16px),1.3rem=13 px,计算方便点;

注:可以引入 CSS 预处理工具(Sass、LESS 、Stylus等)自动计算 rem 值。

文章为原创,转载请注明出处,谢谢