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.5
(1rem = 1/62.5屏幕
);因此当我们以rem
为单位时,就相当于以屏幕的百分比为单位了,自然就跟屏幕的大小没有关系了。
- 当我们的屏幕宽度变为
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';
})()