本質區別: rem(root element)是參照html的font-size,em(element)是參照父元素的font-size

優點: 以rem/em為單位比px更方便,螢幕尺寸發生變化時只需要更改html/body基數即可,不需要再重新給每個標籤寫不同的font-size

1.使用rem為單位,系統處理時(將rem轉化為px)只會看html的font-size

在使用media query做響應式佈局時(以bootstrap為例)：

      a.首先要做的是確定rem的基數(即html的font-size),一般都是以10px為基數(方便計算),這個可以根據自己的習慣來.

      b.確定html基準百分數(rem參照下html的字型大小採取百分數形式),百分數是自己設定的基數除以預設字型大小(16px)的值.比如以10px為基數時,基準百分數就是: 10px/16px=62.5%;即設定html的font-size為62.5%;

     c.當html的基準百分數設定之後,元素使用rem為單位時就是以基數(a中設定的基數值)為基礎單位,換算方式為: 10px=1rem;比如要設定一個p標籤的字型大小為20px,用rem表示就是2rem(公式: 以rem為單位的值=想要設定的字型大小(20px)/基數值(10px)=2rem).

   響應式實現: 使用@media 在監測到螢幕尺寸發生變化時只需為html設定不同的基數值即可

   如下面例子: 在螢幕寬度小於414px時以8px為基數,非響應式下(415px-1365px)以10px為基數;大於1366px時以12px為基數

html{
  font-size: 62.5%; // 以10px為基數,此時class為a的標籤字型大小為20px
}

.a{
  font-size: 2rem;
}

@media screen and (max-width: 414px){
  html{
    font-size: 50%; // 以8px為基數,此時class為a的標籤字型大小為16px
  }
}

@media screen and (min-width: 1366px){
  html{
    font-size: 75%; // 以12px為基數,此時class為a的標籤字型大小為24px
  }
}
 

2.使用em為單位,系統處理時(將em轉化為px)只會看父元素（本文以body為例）的font-size

   a.使用px為基準

    此時只需要設定一個基數即可,然後接下來使用時只需要用想要的字型大小除以設定的基數值即為以em為單位的值;如: 設定em基數為10px,要設定一個標籤的字型大小為15px,則em=想要設定的值(15px)/基數(10px)=1.5em.例:

body{
  font-size: 10px; // 以10px為基數,此時class為a的標籤字型大小為20px
}

.a{
  font-size: 2em;
}

@media screen and (max-width: 414px){
  body{
    font-size: 8px; // 以8px為基數,此時class為a的標籤字型大小為16px
  }
}

@media screen and (min-width: 1366px){
  body{
    font-size: 12px; // 以12px為基數,此時class為a的標籤字型大小為24px
  }
}
 

   b.使用百分比為基準

使用方式同上面以rem為單位的步驟,例:

body{
  font-size: 62.5%; // 以10px為基數,此時class為a的標籤字型大小為20px
}

.a{
  font-size: 2em;
}

@media screen and (max-width: 414px){
  body{
    font-size: 50%; // 以8px為基數,此時class為a的標籤字型大小為16px
  }
}

@media screen and (min-width: 1366px){
  body{
    font-size: 75%; // 以12px為基數,此時class為a的標籤字型大小為24px
  }
}

   說明: 具體使用時其實兩者差不多,rem也可以直接以px為基準單位,只是兩者參照標籤不同,使用時需注意