移动端和PC端rem布局方式

移动端 布局使用方法rem

第一种：js控制html字体大小， js代码放在head里面

html设置初始font-size：640px的字体大小

var html = document.getElementsByTagName('html')[0];
if(html){         
  var w = window.innerWidth;
  var fontSize = (w > 640 ? 640 : w) / 640 * 30;  //这里最少30，         
  html.style.fontSize = fontSize + 'px';     
}     
window.onload = function(){         
  window.onresize = function(){             
    var w = window.innerWidth;             
    console.log(w);             
    var fontSize = (w>640?640:w)/640 * 30; // 这里最少30，             
    html.style.fontSize = fontSize + 'px';         
  }     
}

第二种：js控制html字体大小常用 ，js代码放在head里面

html设置初始font-size：320px的字体大小

(function(doc, win) {      
  var docEl = doc.documentElement;      
  var resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize';         
  var recalc = function() {          
    var clientWidth = docEl.clientWidth;          
    if (!clientWidth)              
      return;          
    docEl.style.fontSize = (clientWidth>640?640:clientWidth)/ 320 *20 +  'px';      
  };      
  // 不同浏览器resize事件处理机制不同      
  // 使用定时器延迟处理resize回调函数以降低重复响应      
  var recalcTimer = null;      
  var delaycalc = function() {          
    win.clearTimeout(recalcTimer);          
    recalcTimer = win.setTimeout(recalc, 100);      
  };      
  // 移动端不需要考虑事件注册函数的兼容性      
  if (!doc.addEventListener)          
    return;      
  win.addEventListener(resizeEvt, delaycalc, false);      
  // DOMContentLoaded事件只在DOM文档树加载完毕触发，此处不用延迟处理   
  doc.addEventListener('DOMContentLoaded', recalc, false); 
})(document, window);  

PC端 布局使用方法rem

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