问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

移动端使用js控制rem大小

头像
闪亮的大脸
    1326

    如图，本人在写移动端页面时用js控制rem大小。现在出现的问题是，app页面打开的一瞬间会有一秒钟的闪动，就是页面刚加载出来时候页面的内容会很大，一秒之后又恢复正常，尝试了很多办法还是没有解决。希望有大神能帮我指导
    clipboard.png

    javascripthtml
    阅读 5.8k
    5 个回答
    得票最新
    头像
    残阳映枫红
      6.1k11115
      ✓ 已被采纳

      两步:

      1. 代码放进 <head> 里

      2. 不要等待 DOMContentLoaded 事件, 直接执行

      如下代码:

      !function() {
    var html = document.documentElement;
    var setFontSize = function() {
        var width = html.offsetWidth;
        if(width <= 640) {
            html.style.fontSize = width / 6.4+ 'px';
        } else {
            html.style.fontSize = 100 + 'px';
        }
    };
    var timer;
    var setDelay = function() {
        return clearTimeout(timer), (timer = setTimeout(setFontSize, 150));
    }
    window.addEventListener('pageshow', function(evt) {
        return evt.persisted && setDelay();
    });
    window.addEventListener('resize', setDelay);
    setFontSize();
}();
      头像
      eechen
        15.1k51729

        除了在head中执行JS脚本:
        $("html").css("font-size", 0.04 * $(window).width());

        还可以直接用vw(viewport width)这个单位:

        html {
    font-size: 4vw;
}

        假设宽为360px,则4vw等于4%*360=14.4px,也就是html根字体大小为14.4px,其他长度单位是这个大小的倍数,1rem就是1倍,2rem就是2倍.

        头像
        dioxide
          44241523
          头像
          zkimyes
            1.1k1113

            还不如用css媒体查询解决，还有不要放在domready事件里，直接执行。话说二楼刚开年就熬夜加班真可怜

            头像
            爱许乐
              17922643
                  (function (doc, win) {
        var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (clientWidth > 640){
                docEl.style.fontSize = 100 + 'px';
            }else {
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            }

        };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题