在做手機端適配的時候，會選擇不同的單位配合著媒體查詢，去做適配比如em、vw、rem。個人認為讓前端能完美還原設計稿的單位就是rem了。因為美工設計的時候，單位用的是畫素，而前端想在不同螢幕上完全還原設計稿，就必須要有一套換算過程。
這裡就不講太多的為什麼了，因為百度一大把，直接貼方案了（一段js+媒體查詢）。這也是工作中用的方案，僅供參考，我也是參考的網易和淘寶。

//動態計算fontSize
function setViewPort(){
    var clientWidth = document.documentElement.clientWidth;
     if(clientWidth > 750
 
) { //這裡之所以是750。是因為我拿到的設計稿是750
         clientWidth = 750
     };
     document.documentElement.style.fontSize = clientWidth / 7.5 + 'px';
 }
 setViewPort();
 window.onresize = setViewPort;

font-size需要額外的媒介查詢

@media screen and (max-width:321px){
    //
}

@media screen and (min-width:321px) and (max-width
 
:400px){
    //
}

@media screen and (min-width:400px){
    //
}