适配移动端的问题

1.react适配设计稿750px。
2.在app.js文件中添加以下代码。入口文件。实际计算100px的换算为1rem。

  constructor(props) {
    super(props);
    this.state = {
      styles: {},
    };
    this.bodyRef = React.createRef(null);
    /**
     * 判断pc和移动端
     * 
  */
     !(function (win, lib) {
      var timer,
        doc = win.document,
        docElem = doc.documentElement,
        vpMeta = doc.querySelector('meta[name="viewport"]'),
        flexMeta = doc.querySelector('meta[name="flexible"]'),
        dpr = 0,
        scale = 0,
        flexible = lib.flexible || (lib.flexible = {});

      // 设置了 viewport meta
      if (vpMeta) {
        console.warn("将根据已有的meta标签来设置缩放比例");
        var initial = vpMeta
          .getAttribute("content")
          .match(/initial\-scale=([\d\.]+)/);

        if (initial) {
          scale = parseFloat(initial[1]); // 已设置的 initialScale
          dpr = parseInt(1 / scale); // 设备像素比 devicePixelRatio
        }
      }
      // 设置了 flexible Meta
      else if (flexMeta) {
        var flexMetaContent = flexMeta.getAttribute("content");
        if (flexMetaContent) {
          var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),
            maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);

          if (initial) {
            dpr = parseFloat(initial[1]);
            scale = parseFloat((1 / dpr).toFixed(2));
          }

          if (maximum) {
            dpr = parseFloat(maximum[1]);
            scale = parseFloat((1 / dpr).toFixed(2));
          }
        }
      }

      // viewport 或 flexible
      // meta 均未设置
      if (!dpr && !scale) {
        // QST
        // 这里的 第一句有什么用 ?
        // 和 Android 有毛关系 ?
        var u =
          (win.navigator.appVersion.match(/android/gi),
            win.navigator.appVersion.match(/iphone/gi)),
          _dpr = win.devicePixelRatio;

        // 所以这里似乎是将所有 Android 设备都设置为 1 了
        dpr = u
          ? _dpr >= 3 && (!dpr || dpr >= 3)
            ? 3
            : _dpr >= 2 && (!dpr || dpr >= 2)
              ? 2
              : 1
          : 1;

        scale = 1 / dpr;
      }

      docElem.setAttribute("data-dpr", dpr);

      // 插入 viewport meta
      if (!vpMeta) {
        vpMeta = doc.createElement("meta");

        vpMeta.setAttribute("name", "viewport");
        vpMeta.setAttribute(
          "content",
          "initial-scale=" +
          scale +
          ", maximum-scale=" +
          scale +
          ", minimum-scale=" +
          scale +
          ", user-scalable=no"
        );

        if (docElem.firstElementChild) {
          docElem.firstElementChild.appendChild(vpMeta);
        } else {
          var div = doc.createElement("div");
          div.appendChild(vpMeta);
          doc.write(div.innerHTML);
        }
      }

      function setFontSize() {
        var winWidth = docElem.getBoundingClientRect().width;
        //如果屏幕最大宽度大于750px，只取750px的宽度
        if (winWidth / dpr > 750) {
          winWidth = 750 * dpr;
        }

        // 根节点 fontSize 根据宽度决定
        var baseSize = winWidth / 7.5;

        docElem.style.fontSize = baseSize + "px";
        flexible.rem = win.rem = baseSize;
      }

      // 调整窗口时重置
      win.addEventListener(
        "resize",
        function () {
          clearTimeout(timer);
          timer = setTimeout(setFontSize, 300);
        },
        false
      );

      // 这一段是我自己加的
      // orientationchange 时也需要重算下吧
      win.addEventListener(
        "orientationchange",
        function () {
          clearTimeout(timer);
          timer = setTimeout(setFontSize, 300);
        },
        false
      );

      // pageshow
      // keyword: 倒退 缓存相关
      win.addEventListener(
        "pageshow",
        function (e) {
          if (e.persisted) {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
          }
        },
        false
      );

      // 设置基准字体
      if ("complete" === doc.readyState) {
        doc.body.style.fontSize = 12 * dpr + "px";
      } else {
        doc.addEventListener(
          "DOMContentLoaded",
          function () {
            doc.body.style.fontSize = 12 * dpr + "px";
          },
          false
        );
      }

      setFontSize();

      flexible.dpr = win.dpr = dpr;

      flexible.refreshRem = setFontSize;

      flexible.rem2px = function (d) {
        var c = parseFloat(d) * this.rem;
        if ("string" == typeof d && d.match(/rem$/)) {
          c += "px";
        }
        return c;
      };

      flexible.px2rem = function (d) {
        var c = parseFloat(d) / this.rem;

        if ("string" == typeof d && d.match(/px$/)) {
          c += "rem";
        }
        return c;
      };
    })(window, window.lib || (window.lib = {}));
 }
  componentDidMount() {
    // 移动端键盘弹起引起页面重载，禁止重载.
    const height = window.innerHeight + "px";
    this.bodyRef.current.style.height = height;
    window.onresize = function () {
      document.querySelector("#root").style.height = height;
    }

    if (
      navigator.userAgent.match(/Android/i) ||
      navigator.userAgent.match(/webOS/i) ||
      navigator.userAgent.match(/iPhone/i) ||
      navigator.userAgent.match(/iPad/i) ||
      navigator.userAgent.match(/iPod/i) ||
      navigator.userAgent.match(/BlackBerry/i) ||
      navigator.userAgent.match(/Windows Phone/i)
    ) {
      this.setState({ styles: { ...iphone } });
      // 移动端适配
     

    } else {
      this.setState({ styles: { ...pc } });
    }


  }
  // 在组件从 DOM 中移除之前立刻被调用
  componentWillUnmount() {
    window.removeEventListener("resize", this.resizeListener);
  }

4.代码已经写了，在移动端键盘弹起会引起页面重新加载，禁止键盘弹起页面重新计算。
5.element里dialog布局（fixed固定的），如果他的父辈们包含了transform位移，dialog会以父辈盒子为限定区域，移除父辈transform。
6.window.open(‘http://baidu.com’,’_self’),【这个链接用户点击后，并且点击还要等待一个接口返回，再打开新页面】在安卓能打开链接，苹果不能打开，因为苹果限制了类似广告的行为。改为在当前页面打开。
7.pc端适配可以用sass书写函数 【使用时宽度：px2vw(100); 高度： px2vh(100) 】

//                              config.scss文件
//设计稿宽度1920px
$psd-width: 1920;

//设计稿高度1080px
$psd-Height: 1080;

// px转rem 根据设计稿宽度
@function px2rem($px) {
  @return ($px / $psd-width) * 10rem;
}

// px转vw 根据设计稿宽度
@function px2vw($px) {
  @return ($px / $psd-width) * 100vw;
}

// px转vh 根据设计稿高度
@function px2vh($px) {
  @return ($px / $psd-Height) * 100vh;
}

//                           在vue.config.js文件
config.css = {
  extract: false,
  loaderOptions: {
    sass: {
      prependData: `@import "/src/assets/css/config.scss";`
    }
  }
}

，vwvh或者用less来使用(宽度/19.2vw 高度/10.2vh)

更新！！！在另一个vue2.0项目中使用vue.config.scss

module.exports = {
// 这里开始粘贴
    chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
            item
                .use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options({
                    // Provide path to the file with resources
                    // 要公用的scss的路径 记住使用./
                    resources: './src/assets/css/config.scss'
                })
                .end()
        })
    }
}

注意安装

npm install sass-resources-loader
如果运行报错 Fail to compile 
尝试
npm install sass-loader --save-dev      

npm install node-sass  --save-dev