移动端 rem.js动态控制适配

原创于 2018-10-11 08:36:31 发布 · 617 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#rem #javascript #移动端 #适配

javascript+jquery 同时被 2 个专栏收录

46 篇文章

订阅专栏

android+ios+webapp+hybrid

5 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现响应式布局的方法，通过监听窗口的resize事件，根据屏幕宽度动态调整字体大小，确保网页在不同设备上的良好显示。

直接上代码：

(function remYS(doc, win) {
            var docEl = doc.documentElement,
             resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
             recalc = function () {
               var clientWidth = docEl.clientWidth;
               if (clientWidth === undefined) return;
               docEl.style.fontSize = 16 * (clientWidth / 320) + 'px';
             };
           if (doc.addEventListener === undefined) return;
          win.addEventListener(resizeEvt, recalc, false);
           doc.addEventListener('DOMContentLoaded', recalc, false)
        })(document, window)