px em rem的区别

最近在看响应式，所以浅总结一下吧·

CSS中的三个常用单位是px，em，rem，三者有明显的区别。

px-固定的像素

一旦设定无法适应页面大小而改变

em-font size of the element-相对于父元素的字体大小的单位

• 子元素的字体大小的em是相对于父元素的字体大小
• 元素的width/height/padding/margin用em的话是相对于该元素的font-size

<div> 
    我是父元素 
    <div> 我是子元素 
        <div>我是孙元素</div>
    </div> 
</div>

div { 
    font-size: 40px; width: 10em; /* 400px */ 
    height: 10em; 
    border: solid 1px blue;
    
    div { 
        font-size: 0.5em; /* 20px */ 
        width: 10em; /* 200px */ 
        height: 10em; 
        border: solid 1px red; 
        
        div { 
            font-size: 0.5em; /* ???? */ 
            width: 10em; /* ???? */ 
            height: 10em; 
            border: solid 1px black; 
            }
       } 
 }

有奖竞答：第三层div的font size和width height？

你是不是心里想的是10px、100px 逻辑上虽然是正确的但是，

但是Chrome浏览器却是12px、120px （因为Chrome浏览器最小font size值规定是12px)

💡 Chrome默认的最小字体大小是12px，也就是1em默认为12px，如果最外层的父元素直接把font-size设为1.5em，那么该元素的字体大小为18px（12*1.5）

💡 Chrome浏览器的默认字体大小是16px，也就是说1em=16px

💡 基本上浏览器默认的设置都是16px(macOS Firefox 默认 15)，但是一般为了保险以及全局统一或者其他要求，初始化的时候在body层会覆盖掉这个默认设置

rem-font size of the root element-相对于根元素的字体大小的单位

• rem是全部的长度都相对于根元素（）
• 通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem

html代码同上，less代码如下

html { 
    font-size: 10px;
    
    div { 
        font-size: 4rem; /* 40px */ 
        width: 30rem; /* 300px */ 
        height: 30rem; 
        border: solid 1px black; 
        
        div { 
            font-size: 2rem; /* 20px */ 
            width: 15rem; height: 15rem; 
            border: solid 1px red; 
            
            div { 
                font-size: 1.5rem; /* 15px */ 
                width: 10rem; /* 100px */ 
                height: 10rem; 
                border: solid 1px blue;
                } 
            } 
       } 
  }

总结

• rem和em的区别——参照物不同
• em和rem是相对长度范围，相对px更具有灵活性，更适应于响应式布局。更倾向于rem，因为em不同元素的参照物不同（都是该元素的父元素），所以在计算的时候不方便，相比之下rem只有一个参照物（html）元素，当用rem做响应式的时候直接在媒体中改变html的font-size那么用rem做为单位的元素的大小都会相应的改变，很方便。
• px一般用于元素的边框或者定位