amfe-flexible+postcss-pxtorem實現移動端根據螢幕的寬度自適應
阿新 • • 發佈:2021-01-28
技術標籤: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-" ] }) ] } } }, }