移动端适配代码
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';
|