博客 / 詳情

返回

vue2+vant2 使用rem進行瀏覽器適配

根據VANT官方説明,需要在項目中安裝兩個插件即可。

如果需要使用 rem 單位進行適配,推薦使用以下兩個工具:

postcss-pxtorem 是一款 PostCSS 插件,用於將 px 單位轉化為 rem 單位
lib-flexible 用於設置 rem 基準值

但是昨天在安裝使用的時候,出了問題。提示錯誤,打開項目頁面也是空白了。於是百度了下,發現網絡上的文章都是抄襲。基本沒有解決問題,經過一番折騰後發現是postcss這個插件的版本高了,目前如果不指定版本號安裝基本都是安裝的是6+以上版本。導致項目不能識別其標識錯誤!

需要指定其版本號進行安裝,如5.1.1
npm i postcss-pxtorem@5.1.1

接着安裝lib-flexible

安裝完成後,在main.js中引入
import "amfe-flexible"

然後在項目的根目錄下新建.postcssrc.js文件(網上很多人説在安裝完插件後會自動生成,但是我這裏沒有。)
然後在其中寫入:

module.exports = {
  "plugins": {
    "autoprefixer": {
      "browsers": ["Android >= 4.0","iOS >= 8"]
    },
    "postcss-pxtorem": {
      "rootValue": 37.5,
      "propList": ["*"]
    }
  }
}

重啓服務,即可看到原本PX單位全部變成了rem單位了!

發現VUE安裝完插件依賴後,導致項目無法啓動或是啓動後空白。基本都是插件的版本過高引起的,注意下!

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.