js 实现在移动端开发，解决不同手机像素大小的兼容问题

最新推荐文章于 2023-09-13 14:21:37 发布

Timdan

最新推荐文章于 2023-09-13 14:21:37 发布

阅读量2k

点赞数

分类专栏： js 文章标签：手机

本文链接：https://blog.csdn.net/learner_boy/article/details/72793698

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Js 实现在移动开发网页时，根据手机像素不同，自动改变相对，字体的大小。实例代码中以750像素为参考，如果在350像素手机上显示该内容，相对字体大小为1px=0.01rem

  (function (doc, win) {
                var docEle = doc.documentElement,
                        resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
                var recalCulate = function () {
                    var width = docEle.clientWidth;
                    docEle.style.fontSize = 100 * (width / 750) + 'px';
                };
                recalCulate();

                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvent, recalCulate, false);
            })(document, window);