ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

使用rem做单位开发的网站适应移动端

使用rem做单位开发的网站适应移动端 /** * 手机端字体大小自动转换(原) */(function(doc,win){vardocEldoc.documentElement,isIOSnavigator.userAgent.match(/\(i[^;];( U;)? CPU.Mac OS X/),dprisIOS?Math.min(win.devicePixelRatio,3):1,dprwindow.topwindow.self?dpr:1,//被iframe引用时禁止缩放dpr1,scale1/dpr,resizeEvtorientationchangeinwindow?orientationchange:resize;if(!(!!window.ActiveXObject||ActiveXObjectinwindow)){docEl.dataset.dprdpr;varmetaEldoc.createElement(meta);metaEl.nameviewport;metaEl.contentinitial-scalescale,maximum-scalescale, minimum-scalescale;docEl.firstElementChild.appendChild(metaEl);functionIsPC(){varuserAgentInfonavigator.userAgent;varAgents[Android,iPhone,SymbianOS,Windows Phone,iPad,iPod,];varflagtrue;for(varv0;vAgents.length;v){if(userAgentInfo.indexOf(Agents[v])0){flagfalse;break;}}returnflag;}}varrecalcfunction(){varwidthdocEl.clientWidth;//获取屏幕宽度// var width window.screen.width * window.devicePixelRatio; //获取屏幕的分辨率// console.log(宽度--, width)//影响了页面字体大小// if (width / dpr 1366) {// width 1366 * dpr;// }// 乘以100px : rem 100 : 1if(width/dpr735){if(IsPC()){docEl.style.fontSize50px;}else{docEl.style.fontSize100*(width/750)px;}}else{// console.log(宽度22--,width)// console.log(1920,100 * (width / 1920) px)docEl.style.fontSize100*(width/1920)px;}};recalc();if(!doc.addEventListener)return;win.addEventListener(resizeEvt,recalc,false);})(document,window);/** * 手机端字体大小自动转换(新) */// (function (designWidth, maxWidth) {// var doc document,// win window,// docEl doc.documentElement,// remStyle document.createElement(style),// tid;// function refreshRem () {// var width docEl.getBoundingClientRect().width;// maxWidth maxWidth || 540;// width maxWidth (width maxWidth);// var rem width * 100 / designWidth;// remStyle.innerHTML html{font-size: rem px;};// }// if (docEl.firstElementChild) {// docEl.firstElementChild.appendChild(remStyle);// } else {// var wrap doc.createElement(div);// wrap.appendChild(remStyle);// doc.write(wrap.innerHTML);// wrap null;// }// //要等 wiewport 设置好后才能执行 refreshRem不然 refreshRem 会执行2次// refreshRem();// win.addEventListener(resize, function () {// clearTimeout(tid); //防止执行两次// tid setTimeout(refreshRem, 300);// }, false);// win.addEventListener(pageshow, function (e) {// if (e.persisted) { // 浏览器后退的时候重新计算// clearTimeout(tid);// tid setTimeout(refreshRem, 300);// }// }, false);// if (doc.readyState complete) {// doc.body.style.fontSize 16px;// } else {// doc.addEventListener(DOMContentLoaded, function (e) {// doc.body.style.fontSize 16px;// }, false);// }// })(1920, 3840);
返回列表