react项目配置postcss-px2rem-exclude

2022年8月21日09:16:30

1、安装

yarn add postcss-px2rem-exclude

2、在config-overrides.js文件中配置addPostcssPlugins

const{override,addPostcssPlugins}=require('customize-cra')
module.exports=override(addPostcssPlugins([require('postcss-px2rem-exclude')({
      remUnit:75,
      propList:['*'],// exclude: /node_modules/,
      exclude:/node_modules\/antd-mobile/})]))

3、在index.html文件的<head></ head>中添加配置即可，我这里是以750px为基准

<script>(function(win, lib){var doc= win.document;var docEl= doc.documentElement;var metaEl= doc.querySelector('meta[name="viewport"]');var flexibleEl= doc.querySelector('meta[name="flexible"]');var dpr=0;var scale=0;var tid;var flexible= lib.flexible||(lib.flexible={});if(metaEl){
          console.warn("将根据已有的meta标签来设置缩放比例");var match= metaEl.getAttribute("content").match(/initial-scale=([d.]+)/);if(match){
            scale=parseFloat(match[1]);
            dpr=parseInt(1/ scale);}}elseif(flexibleEl){var content= flexibleEl.getAttribute("content");if(content){var initialDpr= content.match(/initial-dpr=([d.]+)/);var maximumDpr= content.match(/maximum-dpr=([d.]+)/);if(initialDpr){
              dpr=parseFloat(initialDpr[1]);
              scale=parseFloat((1/ dpr).toFixed(2));}if(maximumDpr){
              dpr=parseFloat(maximumDpr[1]);
              scale=parseFloat((1/ dpr).toFixed(2));}}}if(!dpr&&!scale){var isAndroid= win.navigator.appVersion.match(/android/gi);var isIPhone= win.navigator.appVersion.match(/iphone/gi);var devicePixelRatio= win.devicePixelRatio;if(isIPhone){// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案if(devicePixelRatio>=3&&(!dpr|| dpr>=3)){
              dpr=3;}elseif(devicePixelRatio>=2&&(!dpr|| dpr>=2)){
              dpr=2;}else{
              dpr=1;}}else{// 其他设备下，仍旧使用1倍的方案
            dpr=1;}
          scale=1/ dpr;}

        docEl.setAttribute("data-dpr", dpr);if(!metaEl){
          metaEl= doc.createElement("meta");
          metaEl.setAttribute("name","viewport");
          metaEl.setAttribute("content","initial-scale="+
              scale+", maximum-scale="+
              scale+", minimum-scale="+
              scale+", user-scalable=no");if(docEl.firstElementChild){
            docEl.firstElementChild.appendChild(metaEl);}else{var wrap= doc.createElement("div");
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);}}functionrefreshRem(){var width= docEl.getBoundingClientRect().width;// if (width / dpr > 540) {//     width = 540 * dpr;// }var rem= width/10;
          docEl.style.fontSize= rem+"px";
          flexible.rem= win.rem= rem;}

        win.addEventListener("resize",function(){clearTimeout(tid);
            tid=setTimeout(refreshRem,300);},false);
        win.addEventListener("pageshow",function(e){if(e.persisted){clearTimeout(tid);
              tid=setTimeout(refreshRem,300);}},false);if(doc.readyState==="complete"){
          doc.body.style.fontSize=12* dpr+"px";}else{
          doc.addEventListener("DOMContentLoaded",function(e){
              doc.body.style.fontSize=12* dpr+"px";},false);}refreshRem();

        flexible.dpr= win.dpr= dpr;
        flexible.refreshRem= refreshRem;
        flexible.rem2px=function(d){var val=parseFloat(d)*this.rem;if(typeof d==="string"&& d.match(/rem$/)){
            val+="px";}return val;};
        flexible.px2rem=function(d){var val=parseFloat(d)/this.rem;if(typeof d==="string"&& d.match(/px$/)){
            val+="rem";}return val;};})(window, window["lib"]||(window["lib"]={}));</script>
  • 作者：jundorir
  • 原文链接：https://blog.csdn.net/weixin_49684995/article/details/120760805
    更新时间：2022年8月21日09:16:30 ，共 2840 字。