pxcoder
diff --git a/‎README.md
Lines changed: 110 additions & 59 deletions b/‎README.md
Lines changed: 110 additions & 59 deletions
@@ -1,92 +1,143 @@
-# 可伸缩布局方案
+#lib.flexible
+
+移动端自适应方案
 
 ## 最新版本
 
 **1.0rc1**
 
-## 依赖
+## 依赖库
 
 无
 
-## 原理
-
-在页面加载之初，判断当前系统以及其`device pixel ratio`，把文档宽度除以16作为文档的字体大小。在之后的样式中通过`rem`单位来实现元素的尺寸等设置，以便确保元素是可伸缩且自适应的。并且配合meta的scale缩放，来达到高清适配的目的。
-
-## 栅格使用方法
+## 使用方法
 
-如选择grid三栏布局，一栏跨4列，则由3个col-4组成
-
-    <!-- .col-*的父节点要为.grid* -->
-    <div class="grid">
-        <div class="col-4"></div>
-        <div class="col-4"></div>
-        <div class="col-4"></div>
-    </div>
+建议对于js做`内敛处理`，在**所有资源加载之前**执行这个js。
 
-如选择grid-thin两栏布局，一栏跨6列，则由2个col-6组成
+执行这个js后，会在`html`（也就是document.documentElement）上增加一个`data-dpr`属性，以及`font-size`样式。
 
-    <div class="grid-thin">
-        <div class="col-6"></div>
-        <div class="col-6"></div>
-    </div>
+之后页面中的元素，都可以用rem单位来设置。`html`上的`font-size`就是rem的基准像素。
 
-如选择grid-fat四栏布局，一栏跨3列，则由4个col-3组成
+## 把视觉稿中的px转换成rem
 
-    <div class="grid-fat">
-        <div class="col-3"></div>
-        <div class="col-3"></div>
-        <div class="col-3"></div>
-        <div class="col-3"></div>
-    </div>
+首先，假设视觉稿大小是`750`（iPhone6）。
 
+当前方案会把这3类视觉稿分成`100份`来看待（为了以后兼容vh，vw单位）。每一份被称为一个单位a。同时，1rem单位认定为10a。拿750的视觉稿举例：
 
-## 单位rem使用方法
+    1a = 7.5px
+    1rem = 75px
 
-对于320宽度来设计的视觉稿，只需要把视觉稿上的尺寸除以20，即可得出rem单位的数值。如果是以640宽度来设计的视觉稿，则除以40即可，依次类推。
-
-    <div class="grid-fat">
-        <div class="col-6"><div class="list">列表</div></div>
-        <div class="col-6"><div class="info">信息</div></div>
-    </div>
-    <style>
-    .list {
-        padding-left: 0.2rem
-    }
-    .info {
-        padding-right: 0.2rem;
-    }
-    </style>
+因此，对于视觉稿上的元素的尺寸换算，只需要`原始px值`除以`rem基准px值`即可。例如240px * 120px的元素，最后转换为3.2rem * 1.6rem。
 
 ## 字体不使用rem的方法
 
-在document上会有一个属性`data-dpr`，值为当前网页的dpr实际值，包括1和2，未来可能有1.5和3。
+字体的大小不推荐用rem作为单位。所以对于字体的设置，仍旧使用px作为单位，并配合用`data-dpr`属性来区分不同dpr下的的大小。
 
-字体的大小不能用rem作为单位，仍旧采用px为单位。所以对于字体的设置，需要用data-dpr属性来区分不同dpr的大小。例如：
+例如：
 
     div {
         width: 1rem; 
         height: 0.4rem;
-        font-size: 12px;
-    }
-    [data-dpr="1"] div {
-        font-size: 12px;
+        font-size: 12px; // 默认写上dpr为1的fontSize
     }
+    
     [data-dpr="2"] div {
         font-size: 24px;
     }
 
-## 如何在高清屏上展示1px的边框
+    [data-dpr="3"] div {
+        font-size: 36px;
+    }
+
+### 手动配置dpr
+
+引入执行js之前，可以通过输出meta标签方式来手动设置dpr。语法如下：
+
+    <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
+
+其中`initial-dpr`会把dpr强制设置为给定的值，`maximum-dpr`会比较系统的dpr和给定的dpr，取最小值。**注意：这两个参数只能选其一。**
+
+### 手动设置rem基准值的方法
+
+输出如下css样式即可：
+
+    html {font-size: 60px!important;}
+
+### 一些常用APIs
+
+**[Number] lib.flexible.dpr**
+
+当前页面的dpr值
+
+**[Number] lib.flexible.rem** 
+
+当前页面的rem基准值
 
-一般边框或者分割线需要精确的以1px的视觉展示出来，普通的方案无法满足要求。在高清方案下，所有的1px线都能完美重现视觉稿。
+**[Number|String] lib.flexible.rem2px([Number|String digital])**
+
+把rem转换为px
+
+**[Number|String] lib.flexible.px2rem([Number|String digital])** 
+
+把px转换为rem
+
+**lib.flexible.refreshRem()** 
+
+刷新当前页面的rem基准值
+
+## 栅格系统
+
+***需引入makegrid.js***
+
+### 使用方法
+
+    lib.flexible.makeGrid(params)
+
+- [Object params]
+    - designWidth - 设计稿宽度
+    - designUnit - 设计稿最小单位a（以px为单位）
+    - columnCount - 栅格列数
+    - columnXUnit - 栅格列宽（以a为单位）
+    - gutterXUnit - 栅格间距（以a为单位）
+    - edgeXUnit - 页面左右边距（以a为单位）
+    - className - 栅格样式的名称（可省略，默认为grid）
+
+通过传入视觉的栅格规范定义，可以输出对应的css样式。
+
+    lib.flexible.makeGridMode(modeName)
+
+- [String modeName]
+
+方案还预置了几个默认的栅格规范，分别是`750-12`，`750-6`，`640-12`，`640-6`。
+
+### 利用meta输出栅格样式
+
+    <meta content="designWidth=750, desginUnit=6, columnCount=12, columnXUnit=7, gutterXUnit=3, edgeXUnit=4" name="grid" />
+
+或
+
+    <meta content="modeName=750-12" name="grid" />
+
+### 栅格代码举例
+
+    <div class="grid">
+        <div class="col-4"></div>
+        <div class="col-4"></div>
+        <div class="col-4"></div>
+    </div>
+
+    <div class="grid">
+        <div class="col-6"></div>
+        <div class="col-6"></div>
+    </div>
+
+    <div class="grid">
+        <div class="col-3"></div>
+        <div class="col-4"></div>
+        <div class="col-5"></div>
+    </div>
 
-div {
-    border: 1px solid #ECECEC;
-    width: 8rem;
-    height: 5rem;
-    border-radius: 0.2rem;
-}
 
-## 常见问题
+### 四类栅格在不同手机上的表现
 
-* 目前安卓机器的scale缩放存在兼容性问题，所以安卓机器都以标清的方案输出。
-* 如遇到加载时页面从大到小等闪烁时，可能需要在页面中内敛代码。
+![栅格](grid.jpg);