移动端适配rem的使用以及原理

在日常开发移动端时，为了适配不同的屏幕我们经常会使用rem来做单位，平时我们只知道使用但是它是具体是怎么实现适配的呢？

1. 为什么移动端需要做适配？

现在手机的屏幕尺寸层出不穷，但是我们开发的过程中按照设计稿的尺寸来写px的话，在不同屏幕下展示的尺寸也不一样； 同样一个 width:300px；height:300px； 的盒子在不同机型上所占的大小是不一样的，在iphone 14ProMax明显空余的位置比在 iphone SE 上要多得多。

不像pc项目不管多大的屏幕我们可以设置一个版型内容区域，比如bilibili,主要内容都固定展示在中心区域，设计师在做设计稿的时也只需按照市面上大部分电脑屏幕尺寸来进行作图即可。

移动端这么多款屏幕不可能每一种都设计一套ui吧？这样的话程序员和设计师都要累死。

2.rem单位

rem单位是一个相对单位 (r:relative),相对于当前页面的根元素 html, 1rem等于一个 html font-size字体像素，那么我们可以根据这个逻辑来做适配： 假如公司的ui小姐姐提供的设计稿是( 640 || 750 || 1280),那么我们可以根据当前屏幕的宽度画等份，以 当前屏幕为 375 设计稿750 为例：

const  html = document.documentElement;// 375
const k = 750;
html.style.fontSize =  html.clientWidth / k

把375分成750份，每一份是0.5px,那么 1rem==0.5px,假如我们在设计稿上面量的一个元素是200px那么要写多少像素呢？ 根据公式 200 / (html.clientWidth / k) 算出等于 400rem

3、实际运用

在开发中不可能根据当前屏幕宽度重新计算每一个元素的大小计算起来也很麻烦，那么可以把当前屏幕大小的等份分大一点，如果设计稿是 750 那么我们直接分成7.5等份，1等份 == 1rem == 50px，7.5rem就是整个屏幕的宽度。

如果我们在设计稿上量的尺寸是20px,那么我们直接写 0.2rem即可，

//获取当前屏幕宽度
const html = document.documentElement;
//声明设计稿的宽度
cosnt k = 750;
//计算等份
html.style.fontSize=html.clientWidth / k * 100 +'px'

4、完整代码

持续更新中....