[聚合文章] JS自适应屏幕代码【原创】

写手机页面的时候，我一般使用rem作为单位，比较方便。下面贴出一段js自适应屏幕的代码。

// <!– js 屏幕适配 –>

(function(doc, win) {

var docEl = doc.documentElement,

resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,

recalc = function() {

var clientWidth = docEl.clientWidth;

if(!clientWidth) return;

if (clientWidth >= 720) {        // 设定最大宽度 720px

docEl.style.fontSize = ‘100px’;        // 这里的100px，意思是1rem = 100px；可以自己选择喜欢的大小

} else {

docEl.style.fontSize = 100 * (clientWidth / 720) + ‘px’;    // 如果屏幕小于720，则自适应。

}

};

if(!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener(‘DOMContentLoaded’, recalc, false);

})(document, window);

把这段代码放在js中，就可以使用rem替换px作为单位。

1rem =100px；

如 宽度 240px ，则换算为 2.4rem

字体 16px ，换算为 0.16rem 。

注：         这段js与传统的rem不同。

1. 看设计图写代码不用计算缩小一半的宽高。完全按照设计图的大小转换就行了
2. 在电脑上看，可以百分比还原设计图
3. 这段js可以让rem，em，%，px通用，但最好还是统一使用某个单位

转载时请注明出处及相应链接，本文永久地址：http://blog.it985.com/22941.html

微信打赏

支付宝打赏

感谢您对作者harbour的打赏，我们会更加努力！    如果您想成为作者，请点我