vue移动端使用rem适配手机

本文介绍了一种在前端开发中实现响应式字体大小的方法。通过计算屏幕宽度与设计图的比例,动态调整页面字体大小,确保不同设备上的显示效果一致。

比较懒,不喜欢引入,所以直接在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();
    }
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值