---- AI试用 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

移动端开发用rem布局时的js控制代码

前端开发 蚂蚁 4663℃ 0评论

随着各种新手机的发布,分辨率也碎片化了,我们无法预知将来会出现的分辨率宽度,我们不可能把所有要兼容的分辨率写到css里。
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
移动端开发用rem布局时的js控制代码
30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)
手机端页面rem宽度自适应脚本

(function (doc, win) {
          var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
          };

          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window);
(function(doc, win) {
    var docEle = doc.documentElement,//获取html元素
        event = "onorientationchange" in window ? "orientationchange" : "resize",//判断是屏幕旋转还是resize;
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 100 * (width / 320) + "px");//设置html的fontSize,随着event的改变而改变。
        };
     
    win.addEventListener(event, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));
!function(win) {
 function resize() {
  var domWidth = domEle.getBoundingClientRect().width;
  if(domWidth / v > 540){
   domWidth = 540 * v;
  }
  win.rem = domWidth / 16;
  domEle.style.fontSize = win.rem + "px";
 }
 var v, initial_scale, timeCode, dom = win.document, domEle = dom.documentElement, viewport = dom.querySelector('meta[name="viewport"]'), flexible = dom.querySelector('meta[name="flexible"]');
 if (viewport) {
  //viewport:
  var o = viewport.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
  if(o){
   initial_scale = parseFloat(o[2]);
   v = parseInt(1 / initial_scale);
  }
 } else {
  if (flexible) {
   var o = flexible.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);
   if(o){
    v = parseFloat(o[2]);
    initial_scale = parseFloat((1 / v).toFixed(2))
   }
  }
 }
 if (!v && !initial_scale) {
  var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi));
  v = win.devicePixelRatio;
  v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v
 }
 //没有viewport标签的情况下
 if (domEle.setAttribute("data-dpr", v), !viewport) {
  if (viewport = dom.createElement("meta"), viewport.setAttribute("name", "viewport"), viewport.setAttribute("content", "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no"), domEle.firstElementChild) {
   domEle.firstElementChild.appendChild(viewport)
  } else {
   var m = dom.createElement("div");
   m.appendChild(viewport), dom.write(m.innerHTML)
  }
 }
 win.dpr = v;
 win.addEventListener("resize", function() {
  clearTimeout(timeCode), timeCode = setTimeout(resize, 300)
 }, false);
 win.addEventListener("pageshow", function(b) {
  b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300))
 }, false);
 /* 个人觉得没必要完成后就把body的字体设置为12
 "complete" === dom.readyState ? dom.body.style.fontSize = 12 * v + "px" : dom.addEventListener("DOMContentLoaded", function() {
  //dom.body.style.fontSize = 12 * v + "px"
 }, false);
 */
 resize();
}(window);
var desW = 640;
var winW = document.documentElement.clientWidth;
document.documentElement.style.fontSize = winW/desW*100+"px";

转载请注明:有爱前端 » 移动端开发用rem布局时的js控制代码

喜欢 (2)or分享 (0)

(1)个小伙伴在吐槽
  1. flexible
    蚂蚁2016-03-26 11:18