vant UIとrem適応問題

vue-cli4.x vant-ui, rem , vant px . , html font-size 一.プラグインを追加します.npm i postcss-plugin-px 2 rem--save
追加後は、vue.co nfig.jsファイルにプラグインの設定を追加します.ブログリンクを参照してください.https://www.cnblogs.com/taohuaya/p/10274993.htm
標準設定でOKです.minPixelValuenは3 px以上で変換されます.ピクセルの値が小さすぎて、変換する必要がない場合があります.

    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        //     ，   100  ，              1rem 50px,               px         px 。
                        // rootValue: 37.5, 
                        // unitPrecision: 5, //   REM           。
                        // propWhiteList: [],  //          ，                。
                        // propBlackList: [], //    
                        //   false，  （reg）                 ，  /(node_module)/ 。      UI    px    rem，          
                        // exclude: /(node_module)/, 
                        // selectorBlackList: [], //        px    
                        // ignoreIdentifier: false,  //（boolean/string）         ，  ignoreidentifier ，replace      true。
                        // replace: true, // （   ）    REM   ，       。
                        // mediaQuery: false, //（   ）          px。
                        minPixelValue: 3 //            (3px   rem)。    0
                    }),
                ]
            }
        }
    },

このプラグインは、プロジェクトのcssファイルのpx単位をrem単位に変換します.変換アルゴリズムは、px単位の値をroot Value(デフォルト値100)で割ったものです.例えば、あるcssファイルのfont-size:14 pxで変換した後、font-size:0.14 remとなります.
自動変換ツールをインストールしないなら、手動で図面のピクセルをremに計算してcssに書くのが面倒くさいです.
二.htmlルート要素のfont-size値rem単位を変更するには、htmlのfont-size値の大きさを参照して、適応効果を達成するためには、スクリーン幅によってこの値を調整する必要があります.スクリプトは以下の通りです.

    // designSize:     ( @1x    ,      750px,2  ,   375),rootValue:  ,  100
    function sethtml(designSize: number, rootValue?: number) {
        let rootV = 100;
        if (rootValue) {
            rootV = rootValue;
        }
        //     
        const winWidth = window.document.documentElement.clientWidth;
        //         1.5     ,     
        if (winWidth > 1.5 * designSize) { return; }
        // window.console.log(winWidth);
        const htmlFontSize = winWidth * rootV / designSize;
        window.document.documentElement.style.fontSize = htmlFontSize + 'px';
    }

この方法をmain.jsで呼び出すと、画面サイズに応じてhtml要素のサイズを設定します.sethtml(375)
vant-uiの設計図は750の二倍図であるので、呼び出し時には375.