1,PX

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2,EM

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

3，rem

rem相对于根元素html设置的字体大小
如：

html{
    font-size:10px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;  
}

我把html设置成10px是为了方便我们计算，为什么6rem等于60px
1，css媒体查询做适配

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

2，js做适配

<script>
      function handleResize() {
        var htmlWidth = document.documentElement.clientWidth|| document.body.clientWidth
        let htmlDom=document.getElementsByTagName('html')[0]
        htmlDom.style.fontSize= 100 / 1920 * htmlWidth + 'px';
      }
      handleResize();
      window.onresize = handleResize;
</script>

此时的1rem等同于100px

拓展

视口单位(Viewport units)
什么是视口？
在PC端，视口指的是在PC端，指的是浏览器的可视区域；
而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。
根据CSS3规范，视口单位主要包括以下4个：
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。