移動端的頁面多數情況下用百分比或者媒體查詢來設置頁面的寬高度 這樣會達到響應的效果

這裏解釋幾點

1.-webkit-tap-highlight-color: rgba(0,0,0,0);也可以寫成-webkit-tap-highlight-color: transparent; 去掉點擊時高光顯示 你也可以更改裏面的參數 達到你想要的點擊顯示高光效果

2.-webkit-touch-callout: none; //長按頁面時不觸發系統菜單

3.-webkit-user-select: none; //長按無法選擇文本 這個很有用 一般如果body裏面沒有添加這個屬性的手機頁面 當我們長按某段文字的時候就會出現選中這段文字彈出“復制，全選”等選項 但在webapp開發裏 這個就顯得很不友好 所以尤其是在webapp開發的時候 為了達到與native一樣的真實效果 必須的添加

4.html,body{ width: 100%; height: 100%;} 這個是整個文檔的初始化寬高度 後面的子級都是按照這個數據設置

5.main和子級的height都設置為auto 你也可以不用設 但如果你的頁面是允許滾動的話最好還是要設一下

6.我們把menu使用固定定位到頁面底部 你也可以把他定位在頂部 或任何你想定位的地方

7.menu 裏面的tab我們使用的是百分比分配 因為有border-right所以不能很準確的分配多少 這個應該會有什麽更精準的方法平均分配 待研究(彈性盒模型)

移動端常見問題