移动端使用rem,进行移动端自适应
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | ( function (win){ var docEl = win.document.documentElement; var timer = '' ; function changeRem(){ var width = docEl.getBoundingClientRect().width; if (width > 540) //最大宽度,若果兼容到ipad的话把这个去掉就行 { width = 540; } var fontS = width/10; //把设备宽度10等分 等同于用vw来做 docEl.style.fontSize = fontS + "px" ; } //页面尺寸发生改变的时候就再执行changeRem win.addEventListener( "resize" , function (){ clearTimeout(timer); timer = setTimeout(changeRem,30); }, false ); //页面加载的时候,若果是调用缓存的话就再执行changeRem win.addEventListener( "pageshow" , function (e){ if (e.persisted) //缓存 { clearTimeout(timer); timer = setTimeout(changeRem,30); } }, false ); changeRem(); })(window) |
1 2 3 4 | /*移动端添加的meta属性*/ <br><meta name= "format-detection" content= "telephone=no" > <meta name= "apple-mobile-web-app-capable" content= "yes" > <meta name= "apple-mobile-web-app-status-bar-style" content= "black" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0" > |
注意:根据设计人员给的图片尺寸,高度进行相应的修改,如640*1334的图,底部高度为98px; 按照320*667 CSS要设底部的高度为32/49=0.653rem
因为是新手刚接触rem,就按照自己的理解来了,使用rem元素计算高度,计算不正确的话,请指正出来,谢啦!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)