前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android调整系统字体导致采用REM布局错乱的解决方法

Android调整系统字体导致采用REM布局错乱的解决方法

作者头像
IMWeb前端团队
发布2019-12-03 16:55:01
1.1K0
发布2019-12-03 16:55:01
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队

本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载

解决方法

代码语言:javascript
复制
    function calcREM() {
        var docEl = document.documentElement;
        var width = docEl.getBoundingClientRect().width;
        var rem = width / 7.5;
        rem = parseFloat(rem.toFixed(3));
        docEl.style.fontSize = rem + 'px';
        // 修正系统字体调整造成的布局问题
        var realitySize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
        if (rem !== realitySize) {
            rem = rem * rem / realitySize;
            docEl.style.fontSize = rem + 'px';
        }
        window.REM = rem;
    }

最主要的就是通过window.getComputedStyle方法去获取刚刚设置的fontSize如果发现值不一样,那么系统字体就改了。去修正它就好了。至于为什么设置的值和获取的值不一样就不是很清楚了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-07-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档