rem到是个什么原理？身为一个前段新手，我发现还有很多身边的朋友不能很刻骨的理解rem到底是个什么贵意思，介于我不想再每次上班的时候溜出去蹲厕所打电话给身边的朋友解释这个，我要罗列出来我的思路，接地气的思路。
学习前端开发的很多同学都接触过淘宝的flexible，很方便的适配，它是将页面分割成10等分，然后直接在页面上引用cdn就可以实现，或者将源码copy下来放在自己的项目中本地引入，我不详细的介绍源码，下面详细的介绍rem的原理，看完就自然明白flexible的原理了。
在没有rem这个单位之前，我们移动端用px或者em，em是个相对单位，是根据当前字体大小来定义的，根据W3标准，它们是相对于使用em单位的元素的字体大小。这句话怎么理解？假如一个p标签，你没有设定它的字体大小，但是因为字体大小这个属性是会继承的，它继承了父容器的字体大小，或者是父父父。。。容器的，那么你写1em就会等于这个被继承的父容器的字体大小，那也就是说，
<div class="1" style="font-size:20px">
<div class="2" style="font-size:16px">
<p style="font-size:1em">
就是我了
</p>
</div>
</div>
此时的p标签的字体大小为16px；也就是说要这样
<div class="1" style="font-size:20px;">
<span class="1-1" style="font-size:0.8em">后来的我</span>
<div class="2" style="font-size:16px;">
<p style="font-size:1em;">
就是我了
</p>
</div>
</div>
这样子我的span里面的字体才能跟p里面的字体做到一样大小；看到不同了吗？
这就是em后来渐渐被取代的原因，因为它还是不够方便，有的时候我们要做的换算还是过多了，所以前辈们创造了新的单位《rem》，rem也是在px上升级的，下面我们正式介绍一下rem为什么会更方便，所以被造出来
首先，rem是根据跟字体的大小来定义的，什么叫跟字体大小，我们知道代码里面页面的根本就是html和body，rem就是被定义为相对于html，body里面的字体大小来转换的，那为什么它就方便了呢？因为跟字体的大小不会改变，你定义了是多少就是多少，没定义的话就是默认大小，不会因为你后面元素的字体大小的重新设定而改变，所以，还是上面这个例子，我类名就是用数字了，看着个别扭，（用图片吧，这上面写的有点累）
看，span里面的字体跟p里面的一样大了（真的一样大，我没有把调试一起截图下来而已，你要相信我 >_<）
区别是什么，span和p里面的字体大小已经不被其他的div的字体大小影响了，只跟随html，body的字体大小变化。
这就是rem的方便之处，减少了很多换算，将相对的对象统一成一个（——跟字体），现在知道rem是个什么东西了吧，那我们来说一下有关于不同手机屏幕大小的适配问题，以前用px，em的时候要去写@media screen { } ，（媒体查询）。要为每个容器去重新写一遍单位大小，这样是很不方便的，那rem不是不用去写@media screen { }，而是要写的就少很多很多了，我只要去写跟字体大小的@media screen { }就好了，来看看效果
等比例缩小了，有木有！文字大小会随屏幕的大小的变化而变大变小，再也不用单独写span的媒体查询和p的媒体查询了，这就是rem机制的方便之处
其实说白了，就这么个意思，我们用rem单位的时候不是为了省去媒体查询不写，写还是要写的，只是再也不用写一大堆重复的代码了，只要管好你的跟字体大小就好了，不同的屏幕去写不同的跟字体的媒体查询，比如说6p，又要再大一点 的字体，也就是多谢一行代码的事了。
（好了，再有朋友问我为什么我用了rem换了不同屏幕的手机还是会炸这样的问题，我不用再溜出办公室去打电话解释了，我觉得这里我说的已经跟接地气了，不存在听不懂的吧hhhhhhh）
另： rem的原理就是这样，其实可以写的更优雅一点的就是用js来实现这个适配，相信很多人也在网上看到过这样的js，我顺带提一下，这样的js原理也就是自动去获取屏幕的宽度，然后根据不同屏幕的宽度用js去修改跟字体的大小，这样就可以连媒体查询也省略了呢，但其实也就是我们手写的媒体查询一样的原理
vw单位用的人较少，vw是我写移动端很喜欢的用的单位（vh一样），vw的原理很好理解，view width，可视区域的宽度，也就是手机的宽度（vh 就是view height，后面只说vw，vh一样理解就可以）；这里vw算的是屏幕的百分比，举一个例子很直观的理解
50%跟50vw简直一摸一样嘛，是吗？在这里是一样的，还有不一样的情况，再来看这一个效果就了然了
当我把这个叫aa的div容器宽度改为100px时，50%自然就变成了50px，像上面一样
这个叫aa的div容器宽度依然还是100px，子容器bb的宽度为50vw，结果，50vw代表的是屏幕的一半，并不是100px的一半，这样看起来vw跟%的区别就好像rem跟em的区别一样，一个是相对于父容器定义大小，一个是相对于某个指定不变的参照物（rem相对于跟字体，vw相对于屏幕宽度）而且，vw不用做响应式操作，因为是相对于手机屏幕来写的宽度，所以你用iphone6看的话它就是ip6的一半宽，用iphone5看的话，它就是ip5的一半宽，简直方便的不要不要的
vh跟vw一样的原理，相对于屏幕的高度，一般移动端的开发，写死高度的地方稍微少一点，其实高度用px也可以，毕竟移动端是可以上下滚动的嘛，这里说一下，高度也可以用vw的，建议，移动端开发的时候，一半普通的小号字体的文字，直接就用px就好了，没必要这样的文字也要根据屏幕大小变化而变化（有特殊需求除外）
rem跟vw都能实现不同大小的屏幕兼容，具体用哪一个，看你的心情了emmmmmmmmmmm
<小菜鸟心得,有问题请拍砖>
