Using Ant Design Mobile development in React dva, how to set the font in the project

generally, mobile phones are set to rem.
is using Ant Design Mobile development, how to set the font in the project?

some people say that the settings are as follows in public/index.html, and then set on the basis of 1rem = 100px in components.

    (function (baseFontSize, fontscale) {
        var _baseFontSize = baseFontSize || 100;
        var _fontscale = fontscale || 1;
        var win = window;
        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;
        if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
            // iOS, Android4.3, UC, , dpr1;
            dpr = 1;
        }
        var scale = 1 / dpr;

        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);
        doc.documentElement.style.fontSize = _baseFontSize / 2 * dpr * _fontscale + "px";
        window.viewportScale = dpr;
    })();
    if(!window.Promise) {
        document.writeln("<script src="./js/es6-promise.auto.min.js""+">"+"<"+"/"+"script>");
    }

is this reasonable? Can I adapt to all kinds of mobile phones?


1rem = isn't it too big to set to 100px.
using em does not need to be set, but it should be calculated based on the parent element

Menu