一稿设计多端适配优雅的解决方案 - rem

规范目的

为提高前端团队开发效率，输出高质量的前端页面代码，提高UI设计还原度，特编写该规范文档。本文档如有不对或者不合适的地方请及时提出。

js代码

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

Vue 代码

class Rem{
  constructor(){
    this.render();
  }
  render() {
    var SCREENTYPE = \'orientati \' in window ? \'orientati \' : \'resize\';
    var DEFINENUMBER = 10;
    function setView(){
      var gg = document.documentElement;
      var width = gg.clientWidth;
      if(gg.clientWidth > 720){
        width = 720;
      }else if(gg.clientWidth < 320){
        width = 320;
      }
      gg.style.fontSize = width / DEFINENUMBER + \'px\';
      return setView;
    }
    window.addEventListener(SCREENTYPE,setView());
    document.addEventListener(\'touchstart\',function (event) {
      if(event.touches.length>1){
        event.preventDefault();
      }
    })
    var lastTouchEnd=0;
    document.addEventListener(\'touchend\',function (event) {
      var now=(new Date()).getTime();
      if(now-lastTouchEnd<=300){
        event.preventDefault();
      }
      lastTouchEnd=now;
    },false);
  }
}
export default Rem;

使用方法 在 app.vue 引入

  import Rem from \'@/assets/js/rem\'
  new Rem();

这种做法 只是满足于大家的小部分
我通常使用 flex 布局 vw vh 所有手机屏幕看起来都一样 iPad 也是
=。= rem 就只是给你们参考参考
喜欢用 css/less/sass 天天按计算器的 加油。