一、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;}