码迷,mamicode.com
首页 > Web开发 > 详细

CSS中em和rem的区别

时间:2018-03-23 16:18:55      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:pwc   大小   意思   str   字体   灵活   适应   继承   get   

在css中单位长度用的最多的是px、em、rem,这三个的区别是:

  px是固定的像素,一旦设置了就无法因为适应页面大小而改变。

  em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。

对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。

rem中的r意思是root(根源),这也就不难理解了。

 

em会继承父元素的字体大小,比如:
body{font-size: 16px;}
p{font-size:0.75em;}
span{font-size:2em;}

<html>
我大小为16px;
<p>
  段落文字大小为12px(16*0.75);
  <span>
    我大小是2em,即24px,这里是相对父级字号*2的,而不是相对body里面的16px
  </span>
</p>
</html>

Rem(浏览器支持还不是很理想),他只相对html或body的字体尺寸(默认还是16px,除非你自己用font-size定义为其他),没有了继承父级尺寸这个关系。

CSS中em和rem的区别

标签:pwc   大小   意思   str   字体   灵活   适应   继承   get   

原文地址:https://www.cnblogs.com/xiaoan0705/p/8630647.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!