【学习】webApp里 rem的用法

写在前面

说到webAPP，我们首先要解决的就是“响应式”这个适配的问题。目前主流的技术是利用css3的viewpoint+媒体查询+栅格布局来实现。这方面有很多成熟的框架：bootstrap、amazeUI等可以使用。不过本人很讨厌把别人的东西直接拿来用，为了实现一个简单的功能就引一个几万行的类库进来，所以当初接触移动开发前我花了2周时间去探索bootstrap的源码，把bootstrap的css组件和js组件研究一番，整合到自己的知识体系里去。当然这些都是题外话，今天我们的主角 是 rem。

抛砖

我做的webAPP项目仅仅是针对手机用户，所以在响应式这一块没有使用栅格布局。具体的方法是 设置viewport之后 在body层下面定义 wrap层作为页面内容的容器，每个页面是一个ui-page，通过js控制显示隐藏的形式来切换。在布局方面除了 细节元素的尺寸和边距采用px单位，其他定位都采用百分比，根据屏幕的尺寸来自适应。

是的，这样做略微有点粗糙，所以针对某些细节，我定义了3个媒体查询，分别是iPhone5s、iPhone6、iPhone6 plus的屏幕宽度，针对这些页面里单独覆盖哪些仅仅靠百分比无法做到精细的样式。

这样做当然能满足我这个项目的需求，但暮然回首缺发现css代码实在是有点长了，看得我不太舒服，所以有没有更好地办法来解决 适配 的问题？

引玉

在css3出来之前，大家可能知道 em 单位。这个”em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体 font-size ，这完全可以根据您自己的需，大家也可以参考下图：

    html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
    body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
    h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。

浏览器兼容性

反正针对webAPP来说，兼容性这个问题基本可以忽略不计了，因为Android 浏览器和iPhone的 Safari都是用webkit内核的，但还是提一下：