您好,欢迎访问锦匠课堂!

13863911184

全国咨询热线

您现在所在位置:主页 > 通知资讯 >

移动端javascript适配方案

此适配方案适用750px的设计稿,如设计稿尺寸不同需调整对应参数,适配后会设置html的font-size字体大小,然后利用rem单位进行移动端页面布局!

// “()()”表示自执行函数
(function (doc, win) {
var docEl = doc.documentElement,
    // 手机旋转事件,大部分手机浏览器都支持 onorientationchange 如果不支持,可以使用原始的 resize
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        //clientWidth: 获取对象可见内容的宽度,不包括滚动条,不包括边框
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if(clientWidth>=750){
        	clientWidth=750;
        }
        docEl.style.fontSize = (clientWidth / 7.5) + 'px';
      };
	console.log(doc.body)
recalc();
//判断是否支持监听事件 ,不支持则停止
if (!doc.addEventListener) return;
//注册翻转事件
win.addEventListener(resizeEvt, recalc, false);
   
})(document, window);

如果设计搞是640,则将代码中的750换成640,将7.5换成6.4(640/100),如果设计稿量的尺寸为100*100px,则实际尺寸为1*1rem