【基本解决】ReactJS的Preact中如何设置rem的值和如何使其生效

let width = 750; // 设置默认最大宽度

let fontSize = 0;

const ClientUA = navigator.userAgent;

// 兼容红米3

if (ClientUA.indexOf(‘Redmi 3’) >= 0) {

  fontSize = 85;// 默认字体大小

} else {

  fontSize = 100;// 默认字体大小

}

function widthProportion () {

  const p = document.documentElement.offsetWidth / width;

  return p > 1 ? 1 : p < 0.3 ? 0.3 : p;

}

function onResize () {

  document.documentElement.style.fontSize = widthProportion() * fontSize + “px”;

}

window.addEventListener(‘resize’, onResize, false);

onResize();

‘use strict’;

/**

* @param {Number} [baseFontSize = 100] – 基础fontSize, 默认100px;

* @param {Number} [fontscale = 1] – 有的业务希望能放大一定比例的字体;

*/

const win = window;

export default win.flex = (baseFontSize, fontscale) => {

  const _baseFontSize = baseFontSize || 100;

  const _fontscale = fontscale || 1;

  const doc = win.document;

  const ua = navigator.userAgent;

  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);

  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);

  const isUCHd = UCversion && parseInt(UCversion[1].split(‘.’).join(”), 10) >= 80;

  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);

  let dpr = win.devicePixelRatio || 1;

  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {

    // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;

    dpr = 1;

  }

  const scale = 1 / dpr;

  let 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}`);

  doc.documentElement.style.fontSize = `${_baseFontSize / 2 * dpr * _fontscale}px`;

};

// 开始设置，可以根据业务需求修改参数

flex(100, 1);

(function(_D){

        var _self = {};

        _self.resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’;

        _self.Html = _D.getElementsByTagName(“html”)[0];

        _self.widthProportion = function(){

            var p = Number((_D.body&&_D.body.clientWidth||_self.Html.offsetWidth)/720).toFixed(3);

            return p>1.067?1.067:p<0.444?0.444:p;

        };

        _self.changePage = function(){

            _self.Html.setAttribute(“style”,”font-size:”+_self.widthProportion()*100+”px”);

            _self.correctPx();

        };

        _self.correctPx = function(){

            var docEl = document.documentElement;

            var clientWidth = docEl.clientWidth;

            if (!clientWidth || clientWidth > 768) return;

            var div = document.createElement(‘div’);

            div.style.width = ‘1.4rem’;

            div.style.height = ‘0’;

            document.body.appendChild(div);

            var ideal = 140 * clientWidth / 720;

            var rmd = (div.clientWidth / ideal);

            console.log(rmd);

            if(rmd > 1.2 || rmd < 0.8){

                docEl.style.fontSize = 100 * (clientWidth / 720) / rmd + ‘px’;

                document.body.removeChild(div);

            }

        };

        _self.changePage();

        if (!document.addEventListener) return;

        window.addEventListener(_self.resizeEvt,_self.changePage,false);

        document.addEventListener(‘DOMContentLoaded’, _self.changePage, false);

})(document);

!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p=””,t(0)}([function(e,t){“use strict”;Object.defineProperty(t,”__esModule”,{value:!0});var i=window;t[“default”]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(“.”).join(“”),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector(‘meta[name=”viewport”]’);m||(m=r.createElement(“meta”),m.setAttribute(“name”,”viewport”),r.head.appendChild(m)),m.setAttribute(“content”,”width=device-width,user-scalable=no,initial-scale=”+u+”,maximum-scale=”+u+”,minimum-scale=”+u),r.documentElement.style.fontSize=a/2*s*n+”px”},e.exports=t[“default”]}]);

flex(100, 1);

    <script src=”/antm-viewport.min.js”></script>

flex(100, 1);

    // font-family: ‘Helvetica Neue’, arial, sans-serif;

    font-family: “微软雅黑”, “Microsoft YaHei”, Arial, SimHei;