首页 > 分享 > 移动端适配代码

移动端适配代码

JS控制适配屏幕

明白了REM的原理后,我们就可以使用这个特点来进行适应布局了,这也是现在比较主流的移动端web适配方案(除了页面font-size之外。所有css尺寸都用rem未单位)。当然你有更好的方案,也可以在文章下方进行留言。
三行JS代码完成适配:

注意:

绝不是每个地方都要用rem,rem只适用于固定尺寸!
在相当数量的布局情境中(比如底部导航元素平分屏幕宽,大尺寸元素),你必须使用百分比或者flex才能完美布局! 

设置根元素字体大小(根据设置大小来,比如你一个设计375px;你觉得可以把font-size:100px;比较容易区分来进行换算)

公式:

            设计宽度(375)  /   自己觉得根元素的大小(100px) =  3.75

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

 

//得到手机屏幕的宽度

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

//得到html的Dom元素

let htmlDom = document.getElementsByTagName('html')[0];

//设置根元素字体大小

htmlDom.style.fontSize= htmlWidth/20 + 'px';

相关知识

移动端
如何从零高效的开发一款适配 Android 和 iOS 的移动端App
移动Web实训DAY
【移动开发】详细介绍
手机移动端快速开发
网上花店网站设计,打造一流的在线花卉销售平台 网上花店网站设计简单代码
软件工程移动应用开发是干什么的 – PingCode
Html+Css+js实现春节倒计时效果(移动端和PC端)
(自适应移动端)h5响应式pbootcms绿色园林建筑艺术网站模板 花卉园艺pb网站源码
ios移动端应用服务器端开发教程,iOS下个人完成移动端、后端(简易版)一条龙

网址: 移动端适配代码 https://m.huajiangbk.com/newsview849657.html

所属分类:花卉
上一篇: 淘宝适配移动端js(rem)
下一篇: 百度UEditor编辑文章,移动