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

推荐一个移动端的适配方案

2019-11-09 15:20:07
字体:
来源:转载
供稿:网友
         (function (doc, win) {var docEl = doc.documentElement,//根元素html//判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;//把document的fontSize大小设置成跟窗口成一定比例的大小,从而实现响应式效果。docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';console.log( docEl.style.fontSize)};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数:第一个是事件名称比如点击事件onclick,第二个是要执行的函数,第三个是布尔值doc.addEventListener('DOMContentLoaded', recalc, false)//绑定浏览器缩放与加载时间

})(document, window);

拜读大神的作品

移动端解决方案

((doc, win) => {  const docEl = doc.documentElement,    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',    recalc = () => {      let clientWidth = docEl.clientWidth;      if (!clientWidth) return;      docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';      console.log( docEl.style.fontSize)    };  if (!doc.addEventListener) return;  win.addEventListener(resizeEvt, recalc, false);  doc.addEventListener('DOMContentLoaded', recalc, false);  //当dom加载完成时,或者 屏幕垂直、水平方向有改变进行html的根元素计算})(document, window);if ('addEventListener' in document) {  document.addEventListener('DOMContentLoaded', function() {    FastClick.attach(document.body);  }, false);}


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