最新消息:文章中包含代码时,请遵守代码高亮规范!

JS自适应屏幕代码【原创】

杂项 张, 连明 50浏览 0评论

写手机页面的时候,我一般使用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


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者harbour的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!