近期看到淘宝的移动端改版了，使用了 rem 这个神奇的单位。

这货看上去跟 em 长的颇为相似，但它是 font size of the root element, em 只是 font size of the element, 显然 rem 是 em 的升级版啊。

我们在用 em 的时候，它是相对于父元素字体大小的单位，这点让我们很不爽，很容易出现 1.2em*1.2em 的情况，但是 rem 却是相对于根元素 (html) 的字体大小的单位，这样就可以避免上面的问题了。

那么问题来了，这货用来做移动端适配是不是很合适？然后我们扒一扒移动端适配的几种方式：

  1. 流式布局：宽度使用百分比，高度定死，这样很容易出现图片变形的情况，你懂得。尝试 background-size: cover 也是各种坑，并且效果只能说是差强人意。

  2. 固定宽度：用 pc 时代的思想来做，你不是尺寸多嘛，我搞个 wrap, 宽度设置 320, 然后 margin: 0 auto; 这种方法在 5.5 寸大屏上的效果，只能用呵呵来描述了。

  3. 响应式：老外们喜欢用，但是我一直觉得这是个伪命题。很多人用它是为了 pc、移动端共用一个页面。简而言之，就是懒。(目前本博客就是采用了这个懒法子)

  4. 设置 viewport: <meta name="viewport" content="width=320,maximum-scale=2,user-scalable=no">, 这样，在 320px css 逻辑像素的设备下，就不对页面缩放，否则的话进行 device-width/320 倍的缩放，这样也可以勉强适配，但是是整个页面都被放大了，很容易出现图片变虚的情况。

  5. 我们的 rem 登场了。它跟第 4 种方式类似，都是先假设设备的尺寸就是 320 (当然也可以是其他值)，然后在这个尺寸下切图，设定各个元素针对该尺寸下的相对宽高。当屏幕变宽变窄的时候，各个元素也跟着放大缩小相应的倍数，这样理论上就可以完美适配所有尺寸了。

等等，第 5 种跟第 4 种有什么区别吗？区别还是有的，第 4 种是粗暴的将整个页面放大/缩小,但是第 5 种是可选的…只要将不需要跟随设备屏幕缩放的元素，使用 px 即可…

使用的时候，为了避免 chrome 对小于 12px 字体自动调整，建议给 html 设置 12px 以上的字号…