在项目中重度使用rem

名词解释，rem: root em
实用的页面范围: 1280x720、1920x1080、3840x2160

设置html的font size

rem是相对的长度单位。页面中的所有元素可以相对于根元素(html)设置任何大小。
对html使用媒介查询适配不同屏幕：

html { font-size: 66.666px; }
@media (min-width: 1920px) {
    html { font-size: 100px; }
}
@media (min-width: 3840px) {
    html { font-size: 200px; }
}

如果用在移动设备，上面的样式需要在页面head中设置：

<meta name="viewport" content="width=device-width" />

把设备1920w下的html样式设置为100px，是为了编写样式的方便，保持了和设计师提供的效果图一样的宽度(关于为什么设置100px，是个人习惯)。因此可以简单地把其他两个宽度的下的html的大小计算出来。

提示

在rem适配中，难免会有小数点出现。不好的是有些android设备会忽略小数位。这种情况在动画时，现象很明显。解决办法是，适配1280w，盒子的尺寸尽量设置能被3整除的数字。例如：

.album-item {
    width: 2.91rem;
}

如果设置上面了的媒介查询代码，那么div.album-item的宽度在1920w下是291px, 1280w下是194px，同理3840w下是582px。
当然如果还是不精确，这是我们需要对1280w单独用px做适配，仅此而已。

参看资料:
http://www.w3cplus.com/css3/define-font-size-with-css3-rem
http://isux.tencent.com/web-app-rem.html
http://www.html-js.com/article/2402