移动端使用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元素计算高度,计算不正确的话,请指正出来,谢啦!

posted @   董七  阅读(227)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 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)
点击右上角即可分享
微信分享提示