比较懒,不喜欢引入,所以直接在main.js里加一些代码
定义方法
function setRem() {
var whRk = 100 / 750; // 表示750的设计图,使用100PX的默认值
var bodyWidth = document.body.clientWidth; // 当前窗口的宽度
var rem = bodyWidth * whRk; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
}
window.addEventListener('load', setRem);
window.addEventListener('resize', setRem);
在mounted里使用方法
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
mounted() {
setRem();
}
})
本文介绍了一种在前端开发中实现响应式字体大小的方法。通过计算屏幕宽度与设计图的比例,动态调整页面字体大小,确保不同设备上的显示效果一致。
1068

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



