0
点赞
收藏
分享

微信扫一扫

em和rem的区别

架构大数据双料架构师 2022-03-16 阅读 78

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

  • px是固定的单位长度,一旦设置了就无法随页面的大小而适应改变。
  • em是相对长度单位,比px更具灵活性,em的长度是相对于父元素
  • rem的长度是相对于根元素,也就是html的字体大小

一、em的使用

看如下代码

<div class="parent">
  我是父元素
  <div class="son">
    我是子元素
    <div class="sun">
      我是孙元素
    </div>
  </div>
</div>
<style scoped>
  .parent {
    font-size: 40px;
    width: 10em; /* 根据规则 此时元素的宽是400px */
    height: 10em; /* 400px */
    border: solid 1px blue;
  }
  .son {
    font-size: 0.5em; /* 20px */
    width: 10em; /* 200px */
    height: 10em; /* 200px */
    border: solid 1px crimson;
  }
  .sun {
    font-size: 0.5em;
    width: 10em;
    height: 10em;
    background-color: salmon;
  }
</style>

效果如下

根据em的继承规则,孙元素的font-size应该是10px,宽和高是100px,但是此时在谷歌浏览器上却不是这么显示的,因为谷歌浏览器的最小字体大小设置是12px,所有小于12px的字体均显示为12px,可以通过css3的transform的scale()方法来解决。

 所以现在孙元素的字体大小为12px,宽和高为100px。可以通过设置一个px大小的div来对比看

<div class="parent">
  我是父元素
  <div class="son">
    <div class="sun">
      <span>我是孙元素</span>
    </div>
    <div style="width: 100px;height: 100px;background-color: #42b983;float: left">
      <span style="font-size: 12px"> 12px大小的字体</span>
    </div>
  </div>
</div>

效果

 二、rem的使用

rem是css3新引进的一个度量单位。rem的长度是相对于根元素,既html的长度,通常是给html设置一个标准值,然后其他元素设置rem都是以html的标准值为1单位来设置。

当用rem做响应式时,直接在媒体中改变html的font-size那么用rem作为单位的元素的大小都会相应改变。

比如设置html的font-size为16px,

<div class="parent">
  我是父元素
  <div class="son">
    我是子元素
    <div class="sun">
      我是孙元素
    </div>
  </div>
</div>
<style scoped>
  .parent {
    font-size: 3rem;/* 36px */
    width: 50rem; /* 600px */
    height: 50rem; /* 600px */
    border: solid 1px blue;
  }
  .son {
    font-size: 2rem; /* 24px */
    width: 30rem; /* 360px */
    height: 30rem; /* 360px */
    border: solid 1px crimson;
  }
  .sun {
    font-size: 1rem;/*12px*/
    width: 20rem;
    height: 20rem;
    background-color: salmon;
  }
</style>

效果

 

举报

相关推荐

0 条评论