移动端rem具体该怎么使用?

rem

  • rem是相对长度单位。
  • rem会以HTML元素的font-size来设置相对大小。当HTML元素的font-size: 16px时,1rem = 16px, 2rem = 32px
  • 基于以上特性,我们在拿到固定尺寸的设计稿时,使用rem作为单位即可把页面做到适配其他不同屏幕尺寸机型

原理

  • 以750px设计稿为例,此时的font-size默认为12px、即1rem=12px;所以整个屏幕的宽度换算成rem的话就是 750/12 => 62.5rem;这里个人理解为,把屏幕分成62.5份,每一份占屏幕的1/62.51rem = 1/62.5屏幕);因此当我们以rem为单位时,就相当于以屏幕的百分比为单位了,自然就跟屏幕的大小没有关系了。
    750px
  • 当我们的屏幕宽度变为1125px(为了方便计算)的时候,为了达到和750px时的同等视觉效果,也应该想办法让屏幕的宽度变成62.5rem(即要让1rem 变成 1/62.5屏幕宽度 => 根元素font-size 变为1/62.5屏幕宽度);
    计算可得知:1125/62.5 => 18px;所以接下来的任务就是通过js改变font-size的大小为18px
    在这里插入图片描述

设置font-size

具体用法,在页面加入下面代码初始化font-size的大小

(function(){
	let idealViewWidth = document.documentElement.clientWidth || document.body.clientWidth;
	const basicvalue = 750; //设计稿尺寸
	document.documentElement.style.fontSize = (idealViewWidth / basicvalue) * 100 + 'px';
})()
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值