通过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设置根元素字体大小的方式达到各种屏幕基本一直的效果体验。