rem布局

摘要: 前端在做移动端开发的时候，经常会有这样那样的布局方式，而rem布局是比较新兴的一种布局方式

前言

鉴于有一个姑娘一直问我，rem到底咋用啊？它能做到适配吗？而我在经历时间的摧残以后，早已不记得rem是怎么一回事了，总是要各种查查查，算算算之后才又重新弄明白。脑子真是不好用了，索性赶紧记下来。因为我知道，过两天，她还会来找我的。

适配是什么？其实在我的理解，适配就是等比例放缩吧，保证每一部分相互之间的比例都能够符合设计图上的比例，例如在设计稿的盒子与设计稿的宽度比例，应该与盒子在屏幕上的宽度与屏幕的宽度比例相同

一 rem是干什么的

干前端的应该知道em，其实很相似，只不过相对的元素不同，em是相对于父元素的font-size，而rem是相对于html的font-size，浏览器默认的是16px。对于做移动端开发的来说，选择百分比布局（流式布局），还是响应式呢，还是固定到320px宽度呢？总之是各有利弊，现在多了一种更好的选择，rem，它有很多好处，但是它还有一个最大的坏处，那就是我的font-size到底该怎么计算呢？（尤其是对于某个理解能力不算上乘的人来说）

二 rem的计算

1 固定值算法

首先假设我上面的页面设计稿给我时候是按照640的标准尺寸给我的前提下，（当然这个尺寸肯定不一定是640，可以是320，或者480，又或是375）来看一组表格。


这时候呢，假如我的手机屏幕是320px的话，根据等比例放缩这一特点的话，那么我的font-size=320/640*20px，就是说我把640px的设计稿的1rem固定为20px，其它的都根据这个20px去进行计算

结论：font-size=(屏幕宽度)/设计稿宽度*（设计稿宽度/640 x 20）px；

2 均分算法

首先假设我上面的页面设计稿给我时候是按照640的标准尺寸给我的前提下，（当然这个尺寸肯定不一定是640，可以是320，或者480，又或是375），还是这么一段话，这时候的算法略有不同，不是把640px的设计稿的1rem定值为20px，而是除以20（20这个值是约定俗成的做法），得到1rem = 32px；那么我的手机的font-size应该是多少呢，就是手机屏幕宽度除以20（例如320的屏就是320/20=16px）

结论：font-size=屏幕宽度/20；

3 对比

从上面结论可以看到，第二中算法font-size的写法较为简单，其实是殊途同归，各位可以根据自己的理解选择一种即可

三 实例

一个640px的设计稿上有一个200px的盒子，那么安照第一和第二种方法，这个盒子的rem应该设置为多少呢？

1 固定值

640px的设计稿，1rem=20px（固定值），那么200px的盒子也就是10rem；
因此在css中，就可以将其宽度设置为10rem了，就这么简单，那么我们来看看，是不是符合适配呢？
对于一个320px宽的屏幕，其font-size的算法为320/640*20px=10px，所以其font-zize=10px，也就是说在这里的1rem等于10px，因此10rem等于100px；
我们来看看这个盒子在设计稿中所占的比例为200px/640px（我们带上单位），而在手机中的屏幕比例为100px/320px；两者是不是完全相等呢？所以说，这种做法，满足了我们适配的需求

2 均分算法

640px的设计稿，1rem=640px/20=32px，那么200px的盒子也就是6.25rem；
因此在css中，就可以将其宽度设置为10rem了，就这么简单，那么我们来看看，是不是符合适配呢？
对于一个320px宽的屏幕，其font-size的算法为320px/20=16px，所以其font-zize=16px，也就是说在这里的1rem等于16px，因此6.25rem等于100px；
我们来看看这个盒子在设计稿中所占的比例为200px/640px（我们带上单位），而在手机中的屏幕比例为100px/320px；两者是不是完全相等呢？所以说，这种做法，满足了我们适配的需求

总结

其实两者的根本区别在于在设计稿上我的1rem到底等于多少px呢？

由于固定值算法是随便就把1rem=20px了，因此这个值与屏幕宽度和设计稿宽度无半点关系，因此在计算手机的font-size时，才需要用手机屏幕/设计稿宽度*20，这样才存在一个比例关系；

而对于均分算法呢，则是设计稿宽度与屏幕宽度都除以了20，因此两者之间已经存在了一个比例关系了

综合上面的实例，我们可以知道，均分算法确实是比固定值算法要简单粗暴的多，建议选择这种写法