在src目錄下創建 viewport.js
文件下載:https://github.com/imochen/hotcss/tree/master/src
這個JS是用來在頁面打開的時候給HTML根加上適配的字體大小
然后在main.js下添加:
import './viewport.js'
這里強調下為什么不使用lib-flexible插件
個人在使用lib-flexible插件時,感覺沒hotcss友好,
lib-flexible在頁面打開的時候,內容渲染完了才在HTML根上添加適配,這樣頁面會重新渲染一次,導致內容從大變小,或從小變大這樣的BUG。
而hotcss就沒這個問題。
接下來要安裝換算PX換算REM插件
cnpm install postcss-px2rem --save
然后在 vue.config.js加入:
module.exports = {
lintOnSave: false,//關閉eslint
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px2rem')({remUnit: 75}), // 換算的基數
]
}
}
}
}
最后重啟
內容參考:https://blog.csdn.net/u010214074/article/details/84841496