rem 与 em 区别：

一、相同点：

rem与em都是相对单位，目的都是为了在不同的屏幕上显示的效果尽可能的一致，换句话讲就是在大屏幕上进行整体放大，小屏幕上进行整体缩小。

二、区别：

（1）em： em是父元素字体大小

代码示例：

<div>
      <p></p>
</div>

    
        *{
            margin:0;
            padding: 0;
        }
        html{
            font-size: 14px;
        }
        div{
            font-size: 12px;
        }
        p{
            /* em是相对于父元素的字体大小来说的 */
            width: 10em; 
            height: 10em;
            background-color: pink;
        }

 因为em是相对于父元素div来说的，所以此时盒子大小为120*120

（2）rem： rem是相对于html元素的字体大小

代码示例：

<div>
      <p></p>
</div>

    
        *{
            margin:0;
            padding: 0;
        }
        html{
            font-size: 14px;
        }
        div{
            font-size: 12px;
        }
        p{
            /* rem是相对于html元素的字体大小来说的 */
            width: 10rem; 
            height: 10rem;
            background-color: pink;
        }

 因为rem是相对于html元素来说的，所以此时盒子大小为140*140

（3）rem相较于em的优势：

一个页面中有很多个不同的父元素，但是只有一个html元素。若使用em，那么当我们需要改变页面中元素的大小时要受不同父元素大小影响，较为麻烦。而rem可以直接通过修改html里面的文字大小来改变页面中元素的大小从而可以实现一个整体的控制