首页 > 学院 > 开发设计 > 正文

html移动端自适应屏幕大小

2019-11-09 14:59:46
字体:
来源:转载
供稿:网友

在公司官网的制作中 移动端的页面制作是一件很麻烦的事   通过下面的代码可以很容易的自适应不同分辨率的手机屏幕

(function (doc, win) {    var docEl = doc.documentElement,        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',        recalc = function () {            /* var clientHeight = docEl.clientHeight;             if (!clientHeight) return;             var BaseFontSize = 100* (clientHeight/568);             docEl.style.fontSize = BaseFontSize + 'px';*/            var clientWidth = docEl.clientWidth;            if (!clientWidth) return;            var BaseFontSize = 100 * (clientWidth / 320);            docEl.style.fontSize = BaseFontSize + 'px';        };    if (!doc.addEventListener) return;    win.addEventListener(resizeEvt, recalc, false);    doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);导入这段代码后   我们需要用rem代替px   进行CSS布局就好   


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表