标签：function px2rem 适配 timer react webpack innerWidth win var

npm install -g create-react-app

npx create-react-app my-app

1.npm run  eject 

2.html计算

<script>
    !(function (win, doc) {
      function setFontSize() {
        var baseFontSize = 100;
        var baseWidth = 320;
        var clientWidth = document.documentElement.clientWidth || window.innerWidth;
        var innerWidth = Math.max(Math.min(clientWidth, 480), 320);
        var rem = 100;
        if (innerWidth > 362 && innerWidth <= 375) {
          rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.9);
        }
        if (innerWidth > 375) {
          rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.84);
        }
        window.__baseREM = rem;
        document.querySelector('html').style.fontSize = rem + 'px';
      }
      var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
      var timer = null;
      win.addEventListener(evt, function () {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 300);
      }, false);
      win.addEventListener("pageshow", function (e) {
        if (e.persisted) {
          clearTimeout(timer);
          timer = setTimeout(setFontSize, 300);
        }
      }, false);
      setFontSize();
    }(window, document));
  </script>

3.webpack-config,js

npm install  lib-flexible postcss-px2rem-exclude sass-loader node-sass

const px2rem = require('postcss-px2rem-exclude');

px2rem({ remUnit: 75, exclude: /node_modules/i })

4. 入口文件：index.js

import "lib-flexible"

npm start

标签：function,px2rem,适配,timer,react,webpack,innerWidth,win,var
来源： https://www.cnblogs.com/Nyan-Workflow-FC/p/14375897.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。