在移動端開發過程中,響應式佈局是必須要考慮的一個問題。基於UmiJs開發時,使用的組件庫是antd-mobile,通過在.umirc.js中添加配置項,及可以通過對於的postCss插件postcss-px-to-viewport解決響應式佈局的問題。代碼如下:
extraPostCSSPlugins: [
require('postcss-flexbugs-fixes'),
require('postcss-px-to-viewport')({
viewportWidth: 375, // 視窗的寬度,對應的是我們設計稿的寬度,一般是375
unitPrecision: 3, // 指定`px`轉換爲視窗單位值的小數位數(很多時候無法整除)
viewportUnit: 'vw', // 指定需要轉換成的視窗單位,建議使用vw
selectorBlackList: [], // 指定不轉換爲視窗單位的類,可以自定義,可以無限添加,建議定義一至兩個通用的類名
minPixelValue: 1, // 小於或等於`1px`不轉換爲視窗單位,你也可以設置爲你想要的值
mediaQuery: false, // 允許在媒體查詢中轉換`px`
}),
],
其中,postcss-flexbugs-fixes用於修復移動端flex佈局的bug;postcss-px-to-viewport用於自適應佈局,會將px轉成vm。