因为工作原因，我长久没有接触关于CSS工作了，最近拾起老本行，但进入的是另外一个圈子——手机端。
之前在做手机端的时候很简单，利用如下代码，直接写320基准的大小即可，当retina屏上市后，就利用图片宽高除以二(因为设计稿是640 @2x的规格)和background-size来缩小图片达到在retina屏中不会模糊的效果。

1

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

以上是在iphone4盛行的年代的处理办法。
但现如今各种分辨率层出不穷，外加各种三栏不等分布局的情况，导致适配成了问题。
为了精确还原设计稿，前端们采用了rem来作为宽高的单位。
我们来看看rem的官方解释：
font size of the root element
也就是说是对于根元素(html元素)的相对比例，这样，前端们就可以通过页面宽度来动态修改html的font-size，去控制整个页面的缩放了。看起来很棒的样子。

事实上http://m.taobao.com/淘宝的手机端页面就是这样做的（目前是这样，不保证以后）以下是截图：

当我们拉伸浏览器的时候，可以看到html的font-size会发生变化，这里我设置了320的页面宽度，font-size就成了20。
在前端编写CSS大小时，仅需把设计稿(这里是640 @2x的设计稿)的尺寸除以40即可。例如设计稿中：

于是我们可以建立页面demo：
http://www.dmtuan.com/demo/remdemo1/t.html
demo中所有宽高包括字体均采用rem单位，利用js来设置html的font-size，这样就能保证页面在不同的设备上完全按照设计稿等比缩放，能做不少精确布局了。
设置最小宽度20，是设计稿的安全宽度，设置最大宽度，在pad中浏览或者横屏的情况下，可以保证页面不会撑满全屏导致可视区域过小。
所以一些比较常见的规格中设置如下：

——————————————————华丽的分割线———————————————————–
当40的倍数作为rem的换算标准，所以一般奇数也不会出现很多小数点后位数。也算是一种比较常用的办法。
而作为UI的我，在看过material desigh(android L设计规范，后面简称MD)后，有了一点自己的想法。
我们先看下MD中写的

传送门：http://design.1sters.com/material_design/layout/metrics-and-keylines.html
MD中的网格规范是采用8DP设计，也就是说640设计稿的16px网格。看到这里我在想这套网格规范其实同样可以适用在IOS中，因为20px的间距可能就略大了。16px正好。
于是我们可以建立一个16px*16px的网格规范，间距、宽高一律采用16的倍数来设计。
以下是我在工作中制定的：

如果按照图中的设计规范设计页面的话，那么我们就可以把倍率从40改成16即可，这样就更加细分了规格，同样的，在设置间距和宽高时，大部分都以整数来设，并且在设计广告时会非常好换算宽度。
注：这里的网格规范和之前PC的栅格化规范并不相同，栅格化中有留有10px的间隙，而这里无论是间隙还是宽高都是16的倍数。
那么我们可以修改以上常规设置：

然后仅需在js换算中，把16修改成40即可，这样的话也可以减少html中font-size的小数点位数。
同样的，如果采用720设计稿，那么这里就改成45，而换算比例还是不变 16倍。