mpvue框架的小程序和H5同時開發

最近公司有新項目開發,產品線包括小程序,H5等,決定用mpvue進行開發。記錄一下遇到的問題:javascript

一、樣式統一css

爲了達到共用一套樣式,採用px2rem-loaderpx2rpx-loader進行代碼的打包,細節以下:vue

  • 因爲UI設計圖是在藍湖上標註,寬度750,選擇像素 PX
  • 樣式中直接寫px,在小程序端會轉化成rpx,在H5端會轉化成rem

二、參數配置java

在px2rem-loader中配置以下小程序

options: {
      remUnit: 75
    }

在px2rpx-loader中配置以下設計

options: {
      baseDpr: 1,
      rpxUnit: 1
    }

三、注意事項blog

因爲在px2rem-loader中,全部px均轉化成rem,故在使用1px時會將1轉化成一個很小的rem小數,可能會形成樣式失效,故能夠使用 /* no */ ,表示不進行轉化ip

border: 1px solid #ca150f; /* no */
相關文章
相關標籤/搜索