移动端布局-实例
1.rem布局案例 (demo)
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 28 29 30 | /*媒体查询*/ @media screen and ( min-width : 320px ){ html{ font-size : 10px ;} } @media screen and ( min-width : 360px ){ html{ font-size : 11.25px ;} } @media screen and ( min-width : 375px ){ html{ font-size : 11.71875px ;} } @media screen and ( min-width : 414px ){ html{ font-size : 12.9375px ;} } @media screen and ( min-width : 480px ){ html{ font-size : 15px ;} } @media screen and ( min-width : 568px ){ html{ font-size : 17.75px ;} } @media screen and ( min-width : 640px ){ html{ font-size : 20px ;} } |
2.淘宝flexible布局 (demo)
1 2 3 4 5 | //author:caibaojian //website:http://caibaojian.com //weibo:http:weibo.com/kujian //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750) ! function (e,t){ function n(){ var n=l.getBoundingClientRect().width;t=t||540,n>t&&(n=t); var i=100*n/e;r.innerHTML= "html{font-size:" +i+ "px;}" } var i,d=document,o=window,l=d.documentElement,r=document.createElement( "style" ); if (l.firstElementChild)l.firstElementChild.appendChild(r); else { var a=d.createElement( "div" );a.appendChild(r),d.write(a.innerHTML),a= null }n(),o.addEventListener( "resize" , function (){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener( "pageshow" , function (e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1), "complete" ===d.readyState?d.body.style.fontSize= "16px" :d.addEventListener( "DOMContentLoaded" , function (e){d.body.style.fontSize= "16px" },!1)}(750,750); |
3.设置meta标签(demo)
<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】开源 Linux 服务器运维管理面板 1Panel V2 版本正式发布
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET MAUI项目中绑定Android库实现硬件控制的开发经历
· 糊涂啊!这个需求居然没想到用时间轮来解决
· 浅谈为什么我讨厌分布式事务
· 在 .NET 中使用内存映射文件构建高性能的进程间通信队列
· 一个 java 空指针异常的解决过程
· 干翻 Typora!MilkUp:完全免费的桌面端 Markdown 编辑器!
· 记一次.NET MAUI项目中绑定Android库实现硬件控制的开发经历
· 那些年我们一起追过的Java技术,现在真的别再追了!
· 从WebApi迁移到Minimal API?有了这个神器,小白也能10分钟搞定!
· 抛开官方库,手撸一个轻量级 MCP 服务端