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