最近因為一些需要，做了h5相關的工作。發現在pc端瀏覽器和移動端瀏覽器上的效果大大不一樣，總結如下適配經驗，後面總結的繼續在這裡累加：

1.點選事件的適配
首先，需要在head中新增

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

其中initial-scale=1不寫的狀況下，click事件是不響應的。其實這些引數都是螢幕縮放相關的，不知道為啥會影響到點選事件。

其次，適配移動端的點選事件，是需要做很多配置的，簡單起見，推薦使用第三方外掛，畢竟別人多少年的經驗了是不。我用了下老師推薦的百度touch，參考：

touch.on('ul li', 'hold tap doubletap', function(ev){
        index  =  $("ul li").index(this.parentNode);
        console.log("ev:"+ev.type+",index = "+index);
    });

上面這個例子是我使用列表時候用的，發現個不一樣的地方。這裡的this通過開發者工具看到居然不是<li>節點，而是li裡面的節點，所以this.parentNode才能獲取到<li>

2.介面的適配方案
據我們搞前端的同事介紹，大概有兩種方式：一種使用百分比控制，這種大概大家都用過，另一種就是rem，也就是我選擇的這種方式，趕腳挺好用的。
關於rem的介紹網上有很多，大家可以去搜一下。原理大概是這樣的，獲取當前視窗的寬度，然後將它n等分，每一份作為一個單元。將所有以px為單位的尺寸換成xx單元。這樣根據公式，1個單元也就是1rem = width/n; n是固定的，當視窗寬度width發生變化時，1rem實際代表的畫素也對應發生變化。這樣不管你怎麼變，它都能很好的適配寬度。所以操作步驟如下：

首先，在head中新增js程式碼，計算1rem的當前實際畫素

<script type="text/javascript">
        var cssEl = document.createElement('style');
                      document.documentElement.firstElementChild.appendChild(cssEl);

        function setPxPerRem(){
            var dpr = 1;
            //把viewport分成10份的rem，html標籤的font-size設定為1rem的大小;
            var pxPerRem = document.documentElement.clientWidth * dpr / 10;
            cssEl.innerHTML = 'html{font-size:' + pxPerRem + 'px!important;}';
        }
        setPxPerRem();
    </script>

這段程式碼很明顯要放在前面執行，後面的rem才會生效。

然後配置各個尺寸。比如該情況下，1rem=1/10屏，你的應該是多少個1/10屏。這樣寫不免有點蛋疼。還好有大大們的外掛，cssrem,安裝在sublime中，它的作用是自動把px轉換為 rem。
安裝參考：http://www.myexception.cn/web/1987949.html
配置一下其引數：

{
 "px_to_rem":36,
 "max_rem_fraction_length":3,
 "available_file_types":[".html",".css",".less",".sass"],
}

px_to_rem 很明顯是1rem=36px，具體要多少值自己決定。取決於前面的計算公式，width/n。

此時，還可以稍加控制，不讓其無限變大，也不讓其無限變小，比如說限制font-size最大為60px

function setPxPerRem(){
            var dpr = 1;
            var max = 60;
            //把viewport分成10份的rem，html標籤的font-size設定為1rem的大小;
            var pxPerRem = document.documentElement.clientWidth * dpr / 10;
            //限制上限
            if(pxPerRem>60){
                pxPerRem = 60;
            }
            cssEl.innerHTML = 'html{font-size:' + pxPerRem + 'px!important;}';
        }

然後就可以愉快的玩耍啦～～