vue-cli 中是使用css單位rem,實現響應式佈局

分享一種vue-lic中使用rem,實現響應式佈局的超簡單的方法。

第一步:封裝設置rem的方法,放在公用類的js文件中,或者直接放在main.js文件中。

/**
 * 設置rem
 * @param pwidth
 * @param prem
 */
export function getRem (pwidth, prem) {
  var html = document.getElementsByTagName('html')[0]
  var oWidth = document.body.clientWidth || document.documentElement.clientWidth
  html.style.fontSize = oWidth / pwidth * prem + 'px'
}

第二步:main.js 中設置公用方法。

Vue.prototype.getRem = getRem

第三步: 組件mounted中使用getRem方法(注意此方法放在mounted中所有操作的最後)。

mounted  () {
  this.getRem(750, 100)
}





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章