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

来源:互联网 发布:阿里云客服好做吗 编辑:程序博客网 时间:2024/06/06 02:57

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);
阅读全文
0 0
原创粉丝点击