px rem em

em 作为 font-size 的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

  
Apple

div{
  font-size: 15px;
}
div > p{
  font-size: 1.5em;  /** 22.5 = 15 * 1.5 **/
  height: 1.5em;  /** 33.75 = 22.5 * 1.5 **/
  line-height: 2;
 /** 45 = 22.5 * 2
 line-height 的值没有单位的时候本身就代表是自身字体的多少倍 **/
  line-height: 2em;  /** 45 = 22.5 * 2 **/
}

rem 作用于非根元素时，相对于根元素字体大小；rem 作用于根元素字体大小时，相对于其出初始字体大小——MDN

  
    

      
Apple
    
  

html{
  font-size: 15px;  /** px 作用于根 **/
  /** font-size: 1rem; rem 作用于根会有一个不定的值;
  chrome 会有一个默认值 推荐大小是16px; 用户可以调节**/
}
div{
  font-size: 16px;
}
div > p {
  font-size: 2rem; /**rem 作用于非根 30 = 15 * 2 **/
}

对 font-size 使用 rem;
对 border 使用 px;
对 padding; margin; width; height 等长度大小 使用 em