分享一种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)
}