---

< H1 > flexable.js conflicts with installing third-party ui libraries and px2rem third parties, causing problems that third-party libraries cannot be used < / H1 >

npm install lib-flexible--save- dev npm install px2rem-- save- dev
main.js introduces import 'lib-flexible' to add

to / build/unit.js

var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75     // 750
  }
}

  //loader 
 const loaders = options.usePostCSS ? [cssLoader,     postcssLoader,px2remLoader] : [cssLoader]
 //const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
 

then directly write the px unit on the design drawing in the css file, which will be automatically converted into the problem of rem, Synchronize. It is that the css file on the ui library is also converted to rem, which leads to style disorder

. The main reason for the decrease of

is the size of the third library css-written according to data-dpr= "1"

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

when the flexible we use is introduced, the data-dpr is not a dead one, but a dynamic one; it leads to this problem

< H2 > solution < / H2 >

We can uniformly expand the css code px of the third-party library by two times. it sounds stupid, right? I was tortured at first. Some friends should say how much this is changed, and it doesn't matter if there is less code, but the code is exhausted to death.
the vscode editor I use has an extension called px-to-rem, which can be regarded as the savior, which allows you to change all the code in 2 minutes

• download and change the default configuration (path: / Application Support/Code/User/settings.json)

"px-to-rem.px-per-rem": 0.5, / / the first step is to make 1rem equal to 0.5px
select all the code option+Z shortcuts you want to change. (windows I don't know) you will find that all px changes into rem

• change the default configuration

"px-to-rem.px-per-rem": 1, / / step 2
then select all the code option+Z shortcuts you want to change. You will find that the value ratio of all rem to px px is 2 times that of the original

.

• introduce the modified css file into

---

there are many feasible methods on the Internet. I use the more common manual setting of meta tags. Before, I used a npm library of postcss-px2rem-exclude to replace postcss-px2rem without modifying the units in the node_modules directory to achieve adaptation.

---

< H2 > I used postcss-post, iview, to find postcss-pxtorem/indedx.js under node--modules < / H2 >

'use strict';

var postcss = require('postcss');
var objectAssign = require('object-assign');
var pxRegex = require('./lib/pixel-unit-regex');
var filterPropList = require('./lib/filter-prop-list');

var defaults = {
    rootValue: 16,
    unitPrecision: 5,
    selectorBlackList: [],
    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0
};

var legacyOptions = {
    'root_value': 'rootValue',
    'unit_precision': 'unitPrecision',
    'selector_black_list': 'selectorBlackList',
    'prop_white_list': 'propList',
    'media_query': 'mediaQuery',
    'propWhiteList': 'propList'
};

module.exports = postcss.plugin('postcss-pxtorem', function (options) {

    convertLegacyOptions(options);

    var opts = objectAssign({}, defaults, options);
    var pxReplace = createPxReplace(opts.rootValue, opts.unitPrecision, opts.minPixelValue);

    var satisfyPropList = createPropListMatcher(opts.propList);

    return function (css) {

        css.walkDecls(function (decl) {
            if (/ivu-/g.test(decl.parent.selector)) {
                if (decl.value.indexOf('px') === -1) return;
                let vlist = decl.value.split(" ")
                for(let j = 0; j < vlist.length; jPP) {
                    if (vlist[j].indexOf('px') === -1) continue
                    let num = parseInt(vlist[j].match(/\d+px/g)[0].replace('px', '')) * 2
                    vlist[j] = vlist[j].replace(/\d+px/g, num.toString() + 'px')
                }
                let v = vlist.join(' ')
                decl.value = v
            }
        })

        css.walkDecls(function (decl, i) {

            // This should be the fastest test and will remove most declarations
            if (decl.value.indexOf('px') === -1) return;

            if (!satisfyPropList(decl.prop)) return;

            if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return;

            var value = decl.value.replace(pxRegex, pxReplace);
            // if rem unit already exists, do not add or replace
            if (declarationExists(decl.parent, decl.prop, value)) return;

            if (opts.replace) {
                decl.value = value;
            } else {
                decl.parent.insertAfter(i, decl.clone({ value: value }));
            }
        });

        if (opts.mediaQuery) {
            css.walkAtRules('media', function (rule) {
                if (rule.params.indexOf('px') === -1) return;
                rule.params = rule.params.replace(pxRegex, pxReplace);
            });
        }

    };
});

function convertLegacyOptions(options) {
    if (typeof options !== 'object') return;
    if (
            (
                (typeof options['prop_white_list'] !== 'undefined' && options['prop_white_list'].length === 0) ||
                (typeof options.propWhiteList !== 'undefined' && options.propWhiteList.length === 0)
            ) &&
            typeof options.propList === 'undefined'
        ) {
        options.propList = ['*'];
        delete options['prop_white_list'];
        delete options.propWhiteList;
    }
    Object.keys(legacyOptions).forEach(function (key) {
        if (options.hasOwnProperty(key)) {
            options[legacyOptions[key]] = options[key];
            delete options[key];
        }
    });
}

function createPxReplace (rootValue, unitPrecision, minPixelValue) {
    return function (m, $1) {
        if (!$1) return m;
        var pixels = parseFloat($1);
        if (pixels < minPixelValue) return m;
        var fixedVal = toFixed((pixels / rootValue), unitPrecision);
        return (fixedVal === 0) ? '0' : fixedVal + 'rem';
    };
}

function toFixed(number, precision) {
    var multiplier = Math.pow(10, precision + 1),
    wholeNumber = Math.floor(number * multiplier);
    return Math.round(wholeNumber / 10) * 10 / multiplier;
}

function declarationExists(decls, prop, value) {
    return decls.some(function (decl) {
        return (decl.prop === prop && decl.value === value);
    });
}

function blacklistedSelector(blacklist, selector) {
    if (typeof selector !== 'string') return;
    return blacklist.some(function (regex) {
        if (typeof regex === 'string') return selector.indexOf(regex) !== -1;
        return selector.match(regex);
    });
}

function createPropListMatcher(propList) {
    var hasWild = propList.indexOf('*') > -1;
    var matchAll = (hasWild && propList.length === 1);
    var lists = {
        exact: filterPropList.exact(propList),
        contain: filterPropList.contain(propList),
        startWith: filterPropList.startWith(propList),
        endWith: filterPropList.endWith(propList),
        notExact: filterPropList.notExact(propList),
        notContain: filterPropList.notContain(propList),
        notStartWith: filterPropList.notStartWith(propList),
        notEndWith: filterPropList.notEndWith(propList)
    };
    return function (prop) {
        if (matchAll) return true;
        return (
            (
                hasWild ||
                lists.exact.indexOf(prop) > -1 ||
                lists.contain.some(function (m) {
                    return prop.indexOf(m) > -1;
                }) ||
                lists.startWith.some(function (m) {
                    return prop.indexOf(m) === 0;
                }) ||
                lists.endWith.some(function (m) {
                    return prop.indexOf(m) === prop.length - m.length;
                })
            ) &&
            !(
                lists.notExact.indexOf(prop) > -1 ||
                lists.notContain.some(function (m) {
                    return prop.indexOf(m) > -1;
                }) ||
                lists.notStartWith.some(function (m) {
                    return prop.indexOf(m) === 0;
                }) ||
                lists.notEndWith.some(function (m) {
                    return prop.indexOf(m) === prop.length - m.length;
                })
            )
        );
    };
}

< H2 > add < / H2 >

css.walkDecls(function (decl) {
            if (/ivu-/g.test(decl.parent.selector)) {
                if (decl.value.indexOf('px') === -1) return;
                let vlist = decl.value.split(" ")
                for(let j = 0; j < vlist.length; jPP) {
                    if (vlist[j].indexOf('px') === -1) continue
                    let num = parseInt(vlist[j].match(/\d+px/g)[0].replace('px', '')) * 2
                    vlist[j] = vlist[j].replace(/\d+px/g, num.toString() + 'px')
                }
                let v = vlist.join(' ')
                decl.value = v
            }
        })

The

code can be modified by itself. / ivu-/g. replaces other ui frame prefixes, and * 2 replaces multiples of the design draft

. < H2 > when the above method is suitable for dpr dynamic, there is another way to write dpr to death 1 < / H2 >.

then configure postcss-pxtorem .postcss.js

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {browsers: ['defaults']},
    "postcss-pxtorem": {
      "rootValue": 75,
      "propList": ['*', '!border*'],
      // :UIVUX
      // classvuxclassweui-
      "selectorBlackList": ['ivu-']
    }
  }
}

because ui frameworks are generally under dpr=1, and then the third-party style Filter is not converted to rem

---

personal test is valid!