什么是REM
我们知道em、px、vh、vw等是设置大小的单位，所以呢，rem也是一种单位，它指的是网页的根元素的font-size，这个根元素就是html啦。
为什么要用REM
我们知道对于移动端的适配我们有多种办法：
- 对于简单的页面：给定高，宽度100%，直接通用就OK了。
- 复杂一些：我们可以使用响应式方案，使用media query针对不同的移动端做不同页面来适配。
- 百分比布局，也可以方便的适配。
百分比布局，宽度方便确定，可是高度与宽度没办法关联（万一我想要个宽高2:1呢），而且宽度给百分比没有作用。响应式固然好，但是需要针对不同的设备，作出不用的页面，大大增加了所需的精力和时间。使用rem刚好可以弥补这方面的疏漏。所以我们来试试看。
开工rem
我们先来一个简单的百分比布局：
这个时候，解开裤腰带，掏出我们的rem，它指的是根元素的font-size，那么问题来了，我们这个font-size应该设置成什么呢？我们布局是按页面的宽度设置的，所以就将我们的font-size设置成页面的宽度试试。
如图，我们设置了html标签的font-size，却出现了两个问题：
- 字体变大了，这个好解决，我们给body加上单独的font-size就好了。
- 改变页面大小却出现了没有适配，这是为什么呢？因为我们给html标签一个固定的font-size，于是当页面发生改变的时候，排版出了问题，接下来我们解决这个问题：
到这里我们就知道了用rem是多么的方便，然而这还不是很方便。因为，每一个rem都需要我们去计算，这样是不对的，因为这样我们会在计算上做很多无用功。我们希望设计稿上是多少，我们就写多少。于是就出现了一个很方便的工具。Sass!!~
SASS使用指南于是就去阅读以下阮一峰的博客指南。使用SASS需要安装ruby，于是就去装了个，然后再安装SASS。
安装成功后，就开始使用SASS热热手。
如图，可以看出将scss文件和css文件关联之后，scss的修改就会改变css里面的内容。那为什么多此一举呢？因为css太弱了啊，css不支持函数，我想做一个简单的加减乘除都没有办法，但是sass可以呀，我只需要在scss文件写一个类似这样的函数：
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
这样我们就可以直接写设计稿上面的数字，而不用自己去计算。简化了我们的一系列的操作。所以掌握rem是很有必要的。
