移动端rem应用实例分析

rem只需要改变根元素的字体大小就可以根据屏幕的宽度等比例改变页面元素大小而不会出现模糊

因为js是在页面加载完成后才执行,所以会有一些页面动态变化
因此可以结合媒体查询来做适配:
例如:

@media only screen and (max-width: 320px){html{font-size: 9px;} }
@media only screen and (min-width: 320px) and (max-width: 352px){html{font-size: 10px;} }
@media only screen and (min-width: 352px) and (max-width: 384px){html{font-size: 11px;} }
@media only screen and (min-width: 384px) and (max-width: 416px){html{font-size: 12px;} }
@media only screen and (min-width: 416px) and (max-width: 448px){html{font-size: 13px;} }
@media only screen and (min-width: 448px) and (max-width: 480px){html{font-size: 14px;} }
@media only screen and (min-width: 480px) and (max-width: 512px){html{font-size: 15px;} }
@media only screen and (min-width: 512px) and (max-width: 544px){html{font-size: 16px;} }
@media only screen and (min-width: 544px) and (max-width: 576px){html{font-size: 17px;} }
@media only screen and (min-width: 576px) and (max-width: 608px){html{font-size: 18px;} }
@media only screen and (min-width: 608px) and (max-width: 640px){html{font-size: 19px;} }
@media only screen and (min-width: 640px){html{font-size: 20px;} }

来看js代码:

//第一种 rem计算方法
;(function (doc, win) {
  var docEl = doc.documentElement,
    // orientationchange 是手机屏幕翻转方向事件
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;

      //核心计算方法 根元素字体大小 = 基数 * (屏幕宽度/设计图宽度)
      //基数可以自定义,(一般640的设计图对应的基数为 20) 可参考http://huaban.com/pins/491459146/
      //元素或字体的rem = 设计图上元素或字体的大小 * 根元素字体大小
      docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
    };

  if (!doc.addEventListener) return;

  //绑定屏幕翻转事件/屏幕尺寸改变事件
  win.addEventListener(resizeEvt, recalc, false);

  //初始化调用
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

//第二种:

!function(win) {
    var doc = win.document
      , el = doc.documentElement
      , design = 720
      , size = design / 100
      , evt = "orientationchange"in win ? "orientationchange" : "resize"
      , setFont = function() {
            var docWth = el.clientWidth || 320;
            docWth > 720 && (docWth = 720),
            el.style.fontSize = docWth / size + "px"
        };
   
    doc.addEventListener && (win.addEventListener(evt, setFont, !1),
    doc.addEventListener("DOMContentLoaded", setFont, !1))
}(window);

另外一种是:大神分享的升级版 rem计算方法

//另外一种是:大神分享的升级版 rem计算方法
!function (doc, win) {
    var docWidth = 750;// 设计图文档宽度

    // css值为:设计图尺寸/100  例:100px => 1rem;
    var docEl = doc.documentElement,

    // orientationchange 是手机屏幕翻转方向事件
        resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
    var recalc = (function refreshRem() {

        //getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置
        var clientWidth = docEl.getBoundingClientRect().width;

        // 8.533333为iPhone4[最小宽为iPhone4尺寸]
        // *5为了方便计算 => 设计图px值除以100得出rem值
        docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11), 8.5) * 5 + 'px';
        return refreshRem;
    })();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);

    // 解决:active这个高端洋气的CSS伪类不能使用问题 特别注意:有可能跟FastClick冲突
    doc.addEventListener('touchstart', function () {}, false);
}(document, window);

还有一种简便写法,dpr > 1 会缩放页面,可能会有偏差

var dpr = 1 / window.devicePixelRatio;
var docEl = document.documentElement;
document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+dpr+',minimum-scale='+dpr+',maximum-scale='+dpr+'" />')
var fz = docEl.clientWidth / 10;
docEl.style.fontSize = fz + 'px';

简便的写法二

var html = document.getElementsByTagName("html")[0];
var rootResize = function() {
    var winClient = document.documentElement.clientWidth;
    var fontSize = winClient < 640 ? winClient / 16 : 40;
    if (fontSize < 20) {
        fontSize = 20;
    }
    html.style.fontSize = fontSize + "px";
}
rootResize();
window.onresize = function() {
    rootResize();
}

参考的文章:web app变革之rem
查看demo:rem应用实例
下载源码:下载源码

发表评论

电子邮件地址不会被公开。 必填项已用*标注