1.meta標籤

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

移動端加上這個標籤才是真正的自適應，不加的話，假如你把一個980px寬度(手機端常規是980)的PC網頁 放在手機上顯示，倒也能正常顯示不出現滾動條，不過是移動裝置對頁面 做了縮小優化，所以字型等都相應縮小了。

關於 initial-scale=1 ，這個參照iphone5的尺寸320*568，如果你頁面按照640*1136做的話，scale就設為0.5

// IOS中safari允許全屏瀏覽
 

<meta content="yes" name="apple-mobile-web-app-capable"> 
// IOS中Safari頂端狀態條樣式
<meta content="black" name="apple-mobile-web-app-status-bar-style"> 
// 忽略將數字變為電話號碼
<meta content="telephone=no" name="format-detection"> 
// 忽略識別emai
<meta content="email=no" name="format-detection"> 

2.圖片尺寸 做全屏顯示的圖片時，一般為了相容大部分的手機，圖片尺寸一般設為 640*960

3.去除 webkit的滾動條

element::-webkit-scrollbar{display: none;}

如果要去除全部的，就把 element去掉 同時這個屬性可讓在 div裡的滾動如絲般順滑： -webkit-overflow-scrolling : touch;

7.在移動端做動畫效果的話，如果通過改變絕對定位的 top，或者 margin的話做出來的效果很差，很不流暢，而使用 css3的 transition、 transform或者 animation的效果將會非常棒（這一方面 IOS比 android又要好不少）。 如果用 **3d（translate3d）來實現動畫，會開啟 GPU加速，動畫會更加流暢，但硬體配置差的安卓用起來會耗很多效能

8.使用圖片時，會發現圖片下總是有大概 4px
的空白，（原因據說圖片是inline，觸發baseline什麼的。。。）常用解決方法有
img{display:block};img{vertical-align:top}

9.使用 a標籤的話，儘量讓 a標籤 block，儘量讓使用者可點選區域最大化

10.對兩個div使用了 transform之後， div下的 z-index有時就會失效，我遇到過，但沒去認真探究，只是把 z-index提高就好了

11.在 iOS中，當你點選比如 input準備輸入時，虛擬鍵盤彈出，整個視窗的 高度 就會變為 減去鍵盤 的高度，加入你在底部有 fixed的元素比如 btn，這個元素就會跑上來，一般都不會太美觀。我是當 focus時就把它設為 absolute，視情況而定，也有比如顯示一個新的層，將含有 fixed按鈕的那一層隱藏的情況等等。 另外一種情況（一般在頁面內容很少時 phone5及以上常發生），當輸入框彈出時 fixed元素擠到輸入框上，當輸入框消失時， fixed元素並沒有隨著輸入框的消失而回到底部，這是因為整個視窗的高度還保持在 減去鍵盤的 高度，需要手動去觸發讓視窗高度回到正常，然後試了很多方法都沒成功，後來的方案是輸入框消失時給頁面加隱形的很大的padding比如 1000px並在 30ms後改為正常

12.禁止使用者選中文字 -webkit-user-select:none

13.當把 input設為 width:100%時，有時可能會遇到 input的寬度超出了螢幕，這時可對 input加一個屬性 box-sizing:border-box

關於 box-sizing:border-box，此屬性是把邊框的寬度和 padding包含在盒子的高寬中，假如你設定兩個元素 float且各佔 50%，又都有 border時，用這個屬性就可以完美地讓它們能顯示在同一行

14.做一個方向箭頭比如 “>” 時，可以用一個正方形的 div，設定 border:1px 1px 0 0；然後rotate(45deg)，這樣就省去了一個圖片

1. CSS權重： style是 1000， id是 100， class是 10，普通如 li、 div和偽類是 1，通用如 *是 0；

16.使用 rem時，設某個 div比如的 height:3rem;line-height:1.5rem;overflow:hidden;時，在某些 android手機上可能會出現顯示不止兩行,第三行會顯示點頭部。 解決：利用 js獲取文字 line-height再去設定 div高度

17.使用 background時， background-position裡使用了比如 center left後不能再加具體的數值去定位，比如 center 10px left（暫時相容性差）

18.使用 rem佈局時，由於 webkit支援的最小字型大小是 12px，所以使用 html使用 62.5%實際是 12px，這樣很難計算，我的做法是設定成 625%即 100px，然後 1rem就相當於 100px

19.移動端字型使用 font-family:Helvetica,sans-serif;我看這也是天貓使用的

20.在 iphone原生鍵盤上用 keyup統計字元數時，系統不會自動監控你選擇文字的事件，比如打了多個拼音，可能選擇的實際文字比輸入的字元數多或者少，但無法在使用者確定自己的輸入時監控到 keyup（其他事件也一樣）判斷字元數。 改成 input事件就可以了

21.實現毛玻璃效果，透過背景看其他元素模糊，自身元素不模糊。

-webkit-backdrop-filter: saturate(180%) blur(20px);
background: rgba(0,0,0,0.5);
這個效果暫時只有 IOS9上的 safari可以。 用 css3的 blur效果的話，是整層元素全部模糊，而透過模糊層看其他的元素不模糊

22.如果需要展示小於 12px的文字，用 transform:scale(%);它將元素縮小，但本身應該佔的空間並不會變小，所以比如要元素居左對齊的話，還需設定 translateX

23.在移動端對 input框使用 disabled屬性，會導致元素裡面 value值在頁面上被隱藏看不見，可以對元素使用 css3效果 pointer-event:none，意思就是此元素對滑鼠事件無效