JavaScript rem.js（rem 自适应屏幕大小）

使用方法：设计稿得到尺寸除以 100 就是 rem 值

;(function(){
  var html = document.documentElement, // 储存 html
  // 横屏还是竖屏
  resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize',
  dW = 750; // 设计稿宽
  function remCalc(){
    var clientW = html.clientWidth; // 视口宽
    if(!clientW) return;
    if(clientW > dW){
      // 如果视口宽大于 dW 设计稿宽 就等于 100px 字体
      html.style.width = dW + 'px';
      html.style.fontSize = '100px';
      html.style.margin = '0 auto';
    }else{
      // 否则，当前视口 / 设计稿宽 * 100 字体大小
      html.style.fontSize = clientW / dW * 100 + 'px';
    }
  }
  if(!html.addEventListener) return;// 是否支持 addEventListener 方法
  // 绑定视口变化事件
  window.addEventListener(resizeEvent,remCalc,false);
  // DOMContentLoaded ---> 类似 window.onload ,但是只需要加载完成页面文档后就可以调用
  document.addEventListener('DOMContentLoaded',remCalc,false);
})()

JavaScript rem.js（rem 自适应屏幕大小） ​

评论 #

JavaScript rem.js（rem 自适应屏幕大小）

评论