移动端适配代码
JS控制适配屏幕
html实现用户注册登录代码明⽩了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 = ElementsByTagName('html')[0];
//设置根元素字体⼤⼩
htmlDom.style.fontSize= htmlWidth/20 + 'px';
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论