让页面自适应屏幕

贴代码

'use strict';

/**
 * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认50px, 对于iPhone的设计稿, 1rem=100px; 方便裸算rem; 有的是16px, 用浏览器默认;
 * @param {Number} [psdWidth = 750] - 设计稿默认宽度, 以750为基准;
 */

Object.defineProperty(exports, "__esModule", {
  value: true
});
var win = window;

exports.default = win.vw = function (baseFontSize, psdWidth) {
  var _baseFontSize = baseFontSize || 100;
  var _psdWidth = psdWidth || 750;

  var doc = win.document;
  var ua = navigator.userAgent;
  var matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  var UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
  var isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
  var isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  var dpr = win.devicePixelRatio || 1;
  var docEl = doc.documentElement;
  // 为了消除安卓dpr乱标的比例
  var rate = 1;
  var scale = 1 / dpr;
  if (isIos) {
    // iOS下不用做什么
  } else if (matches && matches[1] > 534 || isUCHd) {
    // 有些兼容环境下, fontSize为100px的时候, 结果1rem=86px; 需要纠正viewport;
    docEl.style.fontSize = _baseFontSize + 'px';
    var div = doc.createElement('div');
    div.setAttribute('style', 'width: 1rem;display:none');
    docEl.appendChild(div);
    var trueWidth = win.getComputedStyle(div).width;
    docEl.removeChild(div);
    // 如果1rem的真实px跟html.fontSize不符. 那么就要加一个rate缩放了;
    if (trueWidth !== docEl.style.fontSize) {
      var trueWidthVal = parseInt(trueWidth, 10);
      rate = _baseFontSize / trueWidthVal;
      scale = scale * rate;
    }
  } else {
    // 如果是在PC或者安卓4.3(会闪屏)以下, 则正常展现.
    scale = 1;
  }

  var metaEl = doc.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    doc.head.appendChild(metaEl);
  }
  metaEl.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);

  // width/750*100, 为了统一rem为0.01rem = 1px
  var setFontSize = function setFontSize() {
    docEl.style.fontSize = _baseFontSize / _psdWidth * docEl.clientWidth * rate + 'px';
  };
  setFontSize();
  win.addEventListener('resize', setFontSize);
};

module.exports = exports['default'];

作用是，提高视觉稿的还原度。

配合px2rem插件的使用，传入设计稿宽度和基础字号，之后所有的宽高，都按照视觉搞设定的来即可，单位用px即可。插件会进行转换，上面的代码又会根据屏幕的大小，进行自动适配。