通過rem及js實現手機屏幕適配

rem單位介紹：相對根元素（html）的長度單位，1rem=16px 。

font-size:計算值的倍數

適配原理：用rem取代原來的px，動態修改html的font-size適配。

舉例說明：

　　我們可以把CSS中的px單位換成rem單位來進行測試。因為html根元素的字體大小是16px，那么換成rem單位，直接除以16就好

<div class="divSize">
    <p>文字大小</p>
</div>

.divSize{
  width:20rem;/*iphone5:320px*/  
  height:10rem;
  background:pink;    
}
.divSize p{
  font-size:2rem;  
}

通過JS控制適配屏幕：

<script>
    //得到手機屏幕的寬度
    let htmlWidth = document.documentElement.clientWidth ||     document.body.clientWidth;
    //得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
    //設置根元素字體大小
    htmlDom.style.fontSize= htmlWidth/20 + 'px';
</script>

如此，我們便通過js設置根元素字體大小的方式達到各種屏幕基本一直的效果體驗。