移動端適配代碼

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';