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文件中加一段該插件的配置.參考博客https://www.cnblogs.com/taohuaya/p/10274993.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文件單獨設置轉換比例.這個暫未研究.