移动端适配代码

JS控制适配屏幕

明白了REM的原理后，咱们就能够使用这个特色来进行适应布局了，这也是如今比较主流的移动端web适配方案(除了页面font-size以外。全部css尺寸都用rem未单位)。固然你有更好的方案，也能够在文章下方进行留言。
三行JS代码完成适配：

注意:

毫不是每一个地方都要用rem，rem只适用于固定尺寸！
在至关数量的布局情境中（好比底部导航元素平分屏幕宽，大尺寸元素），你必须使用百分比或者flex才能完美布局！ 

 

设置根元素字体大小（根据设置大小来，好比你一个设计375px；你以为能够把font-size:100px;比较容易区分来进行换算）

公式：

            设计宽度(375)  /   本身以为根元素的大小（100px） =  3.75

            根元素fontSize = 设计宽度(375) /  3.75  =  100

 

 

1 2 3 4 5 6 7

//获得手机屏幕的宽度 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; //获得html的Dom元素 let htmlDom = document.getElementsByTagName('html')[0]; //设置根元素字体大小 htmlDom.style.fontSize= htmlWidth/20 + 'px';