学习总结（2）--动态REM

[Pomelo1213]

什么是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，于是当页面发生改变的时候，排版出了问题，接下来我们解决这个问题：

我们动态的获取页面的宽度，然后将其设置为html标签的font-size就解决这个问题。同时，我们的height也可以使用这个rem单位，这样一来不就将宽度和高度关联起来了吗？布局的灵活性大大增加！

到这里我们就知道了用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是很有必要的。

[zhurenjin]

what the fuck!!!!

[Pomelo1213]

@zhurenjin fuck this blog!!