关于rem的适配前端页面响应式开发必备技巧

👀作者小三是刚刚毕业不久全栈工程师，写的技术文章基本上是学习过程中笔记整理而来，大家看了之后如果喜欢可以给小弟点点赞哦。
👀例外小弟还有个程序员交流群，欢迎各位大佬来摸鱼哈。点击加群

我们作为前端初学者来说，是不是有一个疑惑，我们电脑屏幕大，但是手机屏幕小，那我在PC端页面写好的东西到了手机端岂不是很难看？

所以！我在这里将会给你们介绍关于rem的适配方案

关于rem的适配方案？

• 适配的目的是什么？

• 原理是什么

• 怎么做？

带着这三个疑问，我们一起来看看rem

适配的目的是什么？

肯定是为了适应在不同的设备下，我们写出来的效果差别不大，如果我们只按照PC端来开发，如果用户用手机打开这个页面，那肯定是用起来很难受。

而且，如果我们为了去适配某一台手机，而再去写一个样式，那岂不是工作量更大，更何况市面上的手机品类这么多，屏幕大小不一，什么刘海屏什么的，那工作量可想而知！

原理是什么

我们这就来看看。实现rem的原理是什么?

一. 根据UI给我们的设计稿与设备宽度的大小比例，动态的计算然后去设置html的字体大小(font-size)；然后页面大小根据一个公式去规范元素的大小

二. 根据设计稿元素的宽，高的取值，根据同比例换算为rem单位的值

怎么做？

首先，我们以iphone6为例子，因为我们常用开发都是以iphone6作为移动端的例子来换算，这里为什么就需要您们自己去百度了。

less + @media(媒体查询) + rem

我们假设UI给我们的设计稿是750px的，然后呢我们把屏幕划分为15等份(看个人需求，15到20等份也是可以的)，然后每一份作为HTML的文字大小，然后750除以15也就是50px，那么当我们在宽度为375px的设备的时候，字体大小的换算就是375除上15等分，算出结果25px，然后用页面元素的大小除以不同HTML字体大小，你会发现比例还是一样的，

比如一个100乘100像素大小的盒子在750屏幕下，就是100除以50转换为rem的话是2rem乘2rem，

再比如，当我们想在375的屏幕下画一个100px的盒子，那就是4rem乘4rem

然后我们看看代码