px和em以及rem的区别

px和em以及rem的区别

一、px(像素)

• 相对长度单位，相对于分辨率而言的，1920*1024意思为宽为1920像素，高为1024像素

二、em

• 它并不是固定的，em会继承父元素的大小
• 没有父级继承时，默认继承浏览器字体大小16px 1em=16px

div{
      font-size: 20px;
    }
    div>span{
      font-size: 1em;
    }
    <div>
    <span>哈哈哈哈</span>
  </div>
  //1em=20px

三、rem

• 它并不是固定的，rem相对于根元素的大小(html字体大小)
• 默认是相对于浏览器字体大小16px 1rem=16px

    html{
      font-size: 50px;
    }
    div{
      font-size: 20px;
    }
    div>span{
      font-size: 1rem;
    }
  <div>
    <span>哈哈哈哈</span>
  </div>
  //1rem=50px