一个网页适应多种不同屏幕的H5开发，rem的终极用法

先普及一下知识：

html原生单位rem 即font size of the root element（相对于根元素font-size而变化的单位），

em是相对于其设置了font-size的父元素（如果直接父元素都没有设置，就一级一级往上找，如果没找到，就会采用默认值，其它都与rem的特性一样）。

适用范围：在手机端使用，因为手机中都是applewebkit内核（此时html的fontSize 不能小于12px，因其fontSize默认最小是12px这个可以设置）,1rem在火狐Gecko内核和IE（trident7.0内核）中表现相同，但并不等于applewebkit上显示的大小。

默认情况下不给html根元素设置font-size,则1rem会有默认值：

chrome,IE 9-11,Firefox: 1rem = 16px; IE8不支持rem

如果设置html根元素的font-size，由于浏览器的默认字体最小是12px,所以，

html的font-size:<12   则页面所有元素：1rem = 12px;

html的font-size:>=13   则页面所有元素：1rem = 13px;

原理：以720px（最大值）宽的手机为例，设它的fontSize:100px）为基准，通过控制html的fontSize(即宽每减小1px,相应的fontSize也减少)，就可以实现720~320宽的手机都展示一样的显示效果，

1.HTML

单位用rem，包括字体和所有长宽高单位都用rem,  在chrome中，当fontSize > 12px 时，1px of html === 1rem of any elements

下面设置viewport非常重要，没有的话$(window).width()恒等于980px.

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

css代码：

html{
  font-size:100px;
}
*{margin:0;padding:0;}
.og-layauto{
  width:auto;
  margin:0 auto;
  max-width:720px!important;
  background: green;
}

2.js代码：

jQuery写法：

$(function(){
  var winW = $(window).width();
  $('html').css({'fontSize':100 - (720-winW)* 0.1389 + 'px'});
})

原生写法，增加了window.onresize = fn,如下所示：

window.onload = function(){
  initSize();
  window.onresize = function(){
    throttle(initSize,100);
  }
  function initSize(){
    var handleHtml = document.getElementById("html1");
//ie8 不支持window.innerWidth ie9+支持. 其余两个 ie8 ie8+ chrome firefox都兼容 
    var handle_windowW = window.innerWidth || document.documentElement.width || document.body.width;
    if(handle_windowW > 720){
      handle_windowW = 720;
    }
    handleHtml.style.fontSize = 100 - ( 720 - handle_windowW ) * 0.1389 + "px";
//  handleHtml.style.cssText = "font-size:100px!important"; // 会将目标元素的所有样式清空，且设置为=右边的值。
  }
  function throttle(fn,time,context){
    clearTimeout(fn.t1);
    fn.t1 = setTimeout(function () {
      fn.call(context);
    },time);
  }
}

 

// 以下是最大兼容ipadpro1024px宽屏的算法，向下兼容时要用基准尺寸减去改变的尺寸。

问题 1 ：假如我要在针对iphone6 （375X667）上做开发， UI给的设计图一般都是基于750宽来设计的，我们除2就好了）

如何让iphone6手机的1rem = 100px;  // 为什么是100（为了好计算呀），不能是10呢，因为浏览器默认最小字体就是12px,原因上面有细说

计算公式：设fs为基准font-size，目标font-size为100px，最大兼容尺寸：1024px，开发的手机尺寸375px

因为本来根据html的font-size变化的rem值，1rem = 1px的，但是我们做不到呀，即使是1rem = 10px 也做不到。只能让1rem = 100px呀。

公式 ：

            100 = fs - (1024-375)*(fs/1024), 

求得 ：fs = 273.066

看不懂没有关系，拿着代码，用得爽，开发好了你再慢慢想。

最终的核心代码：

function initFontSize(){
        var htmlDom = document.getElementById("html1");
        var currentW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var value = Number(273.066 - (1024-currentW) * 0.2667).toFixed(2);
        htmlDom.style.fontSize = value + "px";
}

Ok,到此,一个完美适配多种手机屏幕的方案就完成了。大周末的，给你们写博客，记得给个赞哦！^_^^_^^_^

长得帅的需要比常人更努力，才对得起上天给你的那张帅脸。