1. 程式人生 > 其它 >amfe-flexible+postcss-pxtorem實現移動端根據螢幕的寬度自適應

amfe-flexible+postcss-pxtorem實現移動端根據螢幕的寬度自適應

技術標籤:amfe-flexible+postcss-pxtorem實現移動端根vue

fm:
首先我們先引入淘寶的amfe-flexible

npm i -S amfe-flexible

然後在main.js全域性引入

import 'amfe-flexible'

然後在index替換一下

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
>

然後在vue.config,js檔案中寫入一下程式碼 解釋一下 rootValue 是換算的值,
selectorBlackList的作用是如果你引入了元件庫同時也會改變元件庫的樣式,新增這個就是為了讓它忽略第三方外掛庫 ( “van-” 就是以van開頭的元件,其他元件庫同樣這樣寫 ok 結束下班)

module.exports={
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({ // 把px單位換算成rem單位
                        rootValue: 75, // 換算的基數(設計圖750的根字型為75,如果設計圖為640:則rootValue=64)
                        propList: ['*'],
                        "selectorBlackList": [
                            "van-"
                        ]
                    })
                ]
            }
        }
    },
}