H5端子レム適応画面

設計図のサイズとウィンドウ幅を計算し、ページを読み込んだ瞬間に画面に収まるように、ウィンドウ幅を100倍に拡大、つまり
1rem = 100pxをheadタグに導入します。

; (function (win) {
    
    
    var tid;
    function refreshRem() {
    
    
        let designSize = 1920; // 设计图尺寸
        let html = document.documentElement;
        let wW = html.clientWidth;// 窗口宽度
        let rem = wW * 100 / designSize;
        document.documentElement.style.fontSize = rem + 'px';
    }

    win.addEventListener('resize', function () {
    
    
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function (e) {
    
    
        if (e.persisted) {
    
    
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    refreshRem();

})(window);

役に立ったと思われましたら、高評価をお願いします、ありがとう

私をフォローして、技術的な乾物を時々共有してください~

QRコードを読み取って公式アカウントをフォローしてください