ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> CSS教程 >> 移动端H5根据rem适配

移动端H5根据rem适配

来源:网络整理     时间:2016-02-25     关键词:

本篇文章主要介绍了"移动端H5根据rem适配",主要涉及到方面的内容,对于CSS教程感兴趣的同学可以参考一下: //字体大小、页面宽高、图片大小都根据rem的计算进行适配//方便计算一般设置模版的html的字体大小为10px;//根据不同的手机的设计模版传递不同的参数//...

//字体大小、页面宽高、图片大小都根据rem的计算进行适配

//方便计算一般设置模版的html的字体大小为10px;

//根据不同的手机的设计模版传递不同的参数

//下面是iphone6模板的例子

//iphone6模板的样式适配
/*
    # 按照宽高比例设定html字体, width=device-width initial-scale=1版
    # @pargam win 窗口window对象
    # @pargam option{
      designWidth: 设计稿宽度,必须
      designHeight: 设计稿高度,不传的话则比例按照宽度来计算,可选
      designFontSize: 设计稿宽高下用于计算的字体大小,默认20,可选
      callback: 字体计算之后的回调函数,可选
    }
    # return Boolean;
    # mayijun
    # ps:请尽量第一时间运行此js计算字体
*/
!function(win, option) {
  var count = 0, 
      designWidth = option.designWidth, 
      designHeight = option.designHeight || 0, 
      designFontSize = option.designFontSize || 20, 
      callback = option.callback || null,
      root = document.documentElement,
      body = document.body,
      rootWidth, newSize, t, self;
      root.style.width = "100%";
      //返回root元素字体计算结果
  function _getNewFontSize() {
      var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth;
      return parseInt( scale * 10000 * designFontSize ) / 10000;
  }
  !function () {
     rootWidth = root.getBoundingClientRect().width;
     self = self ? self : arguments.callee;
     //如果此时屏幕宽度不准确,就尝试再次获取分辨率,只尝试20次,否则使用win.innerWidth计算
     if( rootWidth !== win.innerWidth &&  count < 20 ) {
        win.setTimeout(function () {
        count++;
        self();
      }, 0);
    } else {
      newSize = _getNewFontSize();
      //如果css已经兼容当前分辨率就不管了
      if( newSize + 'px' !== getComputedStyle(root)['font-size'] ) {
         root.style.fontSize = newSize + "px";
         return callback && callback(newSize);
      };
    };
  }();
}(window, {
  designWidth: 375, 
  designHeight: 627,
  designFontSize: 10,
  callback: function (argument) {
    console.timeEnd("test")
  }
});

以上就介绍了移动端H5根据rem适配,包括了方面的内容,希望对CSS教程有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_336983.html

相关图片

相关文章