vant-ui rem問題

使用vant-ui時rem單位問題

vue-cli3.x項目引入vant-ui1.6.21,要求在項目中使用rem單位,但vant是px的.故,須要添加一個自動轉換插件和一段修改html根元素的font-size值的腳本

一.添加插件: npm i postcss-plugin-px2rem --save

添加以後須要在vue.config.js文件中加一段該插件的配置.參考博客http://www.javashuo.com/article/p-xffpyqtw-cd.html

使用默認配置便可,minPixelValuen設置爲3.表示3px以上才轉換,有些像素值過小時不必轉換.

    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單位的值除以rootValue(默認值100).例如某css文件中font-size : 14px,那麼轉換後就成了font-size : 0.14rem

若是不裝自動轉換工具,那麼須要手動將設計圖上的像素計算成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.

除了vant-ui之外的項目中其它的設計圖須要與vant-ui一致,不然須要對vant-ui的css文件單獨設置轉換比例.這個暫未研究.