一、640设计稿
1）现在比较流行的做法是按照iPhone 5的尺寸来设计
倍率2，逻辑像素320x568。看到的设计稿的宽度就是640的了，当你在编写页面的时候，就要缩小一倍。
边距宽度等缩小一倍比较精确，但是如果是字体缩小一倍的话，放到手机上面看就不太合适啦，比如16px的，缩小一倍就是8px，有点小了。
自己刚开始写的时候，不明白这640的意义，就自己在那边随便改边距等，当和设计稿差不多的时候，就好了。
这样写出来的跟设计稿是有出入的，等于是否定了设计师的成果。
2）自定义icon字体
移动端，引入的文件最好是小一点，这样在用2G载入的时候，速度也能快点。
原先我用的字体库是Font-Awesome，做PC后台的时候，用这个不错，什么类型的都有了，但是前端页面最好还是只要需要的。
这次使用了阿里的Iconfont，在这里面可以自己制作字体，并且还有Unicode方式，让IE6这种低端浏览器也来享受自定义字体。
二、穿透层与流布局
1）flex布局
上图中最后一列有个空白处，而点击这个空白处就需要能穿透点击到下面那个列表。
这次地方就需要CSS，pointer-events:none。
其实用到这个属性也是逼不得已，上面的布局在有顶宽的时候，是很简单的，float浮动+宽高度定死，宽度只要计算一下就能出来。
但是手机页面的话，屏幕宽度都是不定的，那么要计算这个宽度的话就太难了，而且还有margin，左右都有，中间也有。
没办法就用了个flex布局，这个可以让浏览器自动计算宽度，而且还是让宽度自动相等。
接着就出现了上面要穿透的问题了。
flex流布局有很多属性，而我这次在项目中也仅仅是为了方便计算宽度。
/*flexbox布局*/ .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} .flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;} .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;} .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;} .flex-2{-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2;} .flex-3{-webkit-box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3;}
2）column属性
这个是多列布局属性，上面的城市块布局，本来是想用这个的，但发现很不合适。
dl { -webkit-column-count:4; -webkit-column-gap: 1px; column-count:4; column-gap: 1px; }
<dl> <dd> <img src="images/city/nanjing.png"/> <p>南京</p> </dd> <dd> <img src="images/city/hefei.png"/> <p>合肥</p> </dd> <dd> <img src="images/city/shanghai.png"/> <p>上海</p> </dd> </dl>
跟我想象中的使用方法不一样，里面如果是一个标签的话，比如只要显示个img标签，展现的就是流布局
<dl> <img src="images/city/shanghai.png"/> <img src="images/city/shanghai.png"/> </dl>
三、选择符
写PC端的时候，用选择符会很谨慎，万恶的低版本IE好多选择符都不支持，而到了移动端，情况就不同啦，好多都能支持。
所以这次我大量使用了选择符。
伪类选择符:first-child、:last-child、:last-of-type等用的好多，原先很多列表的最后一个的样式与其他地方不一样，要么额外加一个样式要么用JS控制，现在只要用选择符就能搞定，代码的简洁性也增强了。
1）用伪类美化单选框或多选框
用::before来将原控件盖住，用图片替代，在:checked选中后修改图片，本来这些都是需要配合JS脚本的，现在只用CSS即可。
只是第一次点击某个多选框的时候，会先隐藏，然后再出现选中图片，造成一个闪烁。
input[type="checkbox"] { position: absolute; vertical-align: top; margin-top: 4px; margin-left: -20px; visibility:hidden; } input[type="checkbox"]::before { content: ''; background:url('../images/checkbox.png') no-repeat center center; position: absolute; top:-3px;left:-2px; width:18px;height:19px; visibility:visible; } input[type="checkbox"]:checked::before { content: ''; background:url('../images/checkbox_checked.png') no-repeat center center; position: absolute; top:-3px;left:-2px; width:19px;height:19px; visibility:visible; }
2）flex布局与::after配合出现的问题
这个地方为了宽度相等，间距一样，我使用了flex布局，用flex布局还会自动会将高度也对齐
选中的地方会有个小勾，并且有三角形背景，分别用了::before和::after设置，上面的图片中就是两个高度不一样的内容块
在IOS中，一切正常，很OK，但是在Android系统中就有点苦了。这好端端的三角形变形啦。
后面发现小勾是根据内容块中原先的高度相对定位的，后面自动拉高后就不会触发那段CSS了，最终只能用JS修改内容块的高度，然后在触发::after中的样式
ul li.active{ border:1px solid #dc481b; overflow:hidden; } ul li.active::before{ content: "\e605"; position:absolute; right:2px; bottom:2px; z-index:2; color:#FFF; } ul li.active::after{ content:"#"; background:#dc481b; color:#dc481b; width:50px; height:50px; position:absolute; right:-25px; bottom:-25px; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
四、h1~h6
这几个我在写CSS的时候用的非常多，但是由于沿用的是PC中的reset，显示在移动端，字体会特别的大
而且在reset的时候，会设置margin-top和margin-bottom，可是好多场景下，都不会用到或者被父级元素用到了
索性我就去除了外边距，然后重新reset了这几个标签中字体大小
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: inherit;font-weight: 500;line-height: 1.1;color: inherit;} h1 small,h2 small,h3 small,h4 small,h5 small,h6 small, .h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small, h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small, .h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small { font-weight: normal;line-height: 1;color: #777; } h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small, h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small { font-size: 65%; } h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small, h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small { font-size: 75%; } h1,.h1 {font-size: 22px;}h2,.h2 {font-size: 20px;}h3,.h3 {font-size: 18px;} h4,.h4 {font-size: 16px;}h5,.h5 {font-size: 14px;}h6,.h6 {font-size: 12px;}
五、微信浏览器中记住密码
在一次登录微信页面后，客户希望能不用再次输入帐号密码，直接进入登录状态。
简单点么，就用cookie保存账户信息好了，但是要求在退出微信后，还能登录，这个时候用cookie就不行了。
后面只得获取公众号的openid，然后将openid和账户绑定，当读取到openid的时候，读取到账户信息，从而模拟登录。
由于只需要获取openid，所以可以避免弹出授权页面。点击查看网页授权获取用户基本信息。
后面还做了个微信关注后将推送欢迎信息。
六、脚本
页面肯定会有验证的逻辑，还有弹出框的展示，在写页面的时候，写的比较仓促。
在将页面写好后，特地自己整理了两个小插件，方便以后自己开发的时候使用，并且代码很少都只有200多行。插件分别是zDialog和zValidate。
1）zepto
整个脚本使用了zepto类库，语法与jQuery相似，但是又有些不同，有些jQuery可以使用的方式，在这里不能使用。
可以不用载入完整的zepto，根据需要再载入不同的模块。如下面的图片：
2）用iSlider来做图片切换
有中文文档说明，还能自定义添加组件，这个文档很详细，看了就会。点击查看iSlider。
3）用Lightbox2点击查看大图展示
老字号的一个插件，作者重新写了个第二版本的，我稍微修改了下，让这个插件能够支持手指的左右滑动事件，这样更接地气。点击查看Lightbox2。
4）用lazyload来延迟图片加载
图片可以不用一下子全部加载进来，可以在滚动的时候显示。点击查看lazyload。
5）用dropload做下来刷新特效，用mustache模版插件来填充内容
自己公司有个项目需要用到下拉刷新，当时的同事使用了iScroll插件，这个插件很大，而且连带了很多副作用，这次我想找个简单点的，代码能少一点，好让我知道原理的，就找到了这个插件，目前用的很流畅。点击查看dropload。
配合mustache，将内容展现在页面上。
6）用lrz4来上传图片
上传图片是经常使用的一个功能，我在搜索的时候看到了这个插件，也用了一下，挺方便的，运用JS技术，读取到图片的base64内容，再将内容传送到服务器接收，并生成图片。
文档也是蛮全的，点击查看lrz4。在使用的时候自己也做了些封装，使之更容易使用。
7）用fastclick解决zepto的tap点透问题
我在网上看点透看到是在一张页面中的，可我这个地方显示的点透却是在两张页面中。
当时在微信浏览器中会出现这种点透情况，可是在UC浏览器中却不会出现。
而且在微信浏览器中第一次进入的时候不出现，点击浏览器中的返回按钮，再次进入才会出现。
如下面的操作，红色框框中的地方，进入到下一个页面，就会自动点击到那个位置的地方，那个地方正好有弹出层事件。
点头的原理我这里不介绍了，在搜索引擎中输入“tap 点透”，会出现一大串的。
最后我用fastclick，将300ms延迟去除，将绑定的tap事件改成click事件，就没有出现这种情况了，难道说微信浏览器在将两个页面放在一起了吗？才导致这个问题.....
