第一步:封装设置rem的方法,放在公用类的js文件中,或者直接放在main.js文件中。
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)
}
原文:https://blog.csdn.net/Stiven_Lu/article/details/80451073

本文详细介绍了一种使用REM单位进行响应式布局的方法。首先,通过封装getRem函数来动态调整根元素字体大小,确保不同设备屏幕宽度下的适配。其次,在main.js中引入并设置为全局方法,便于各组件调用。最后,在组件mounted生命周期钩子中调用getRem方法,完成布局初始化。

1859

被折叠的 条评论
为什么被折叠?



