響應式手機網站要點

CSS3裏面不少地方瀏覽器不兼容，須要咱們根據瀏覽器的內核添加前綴:
火狐瀏覽器 -moz-
谷歌和蘋果 -webkit-
ie9以及以上版本 -ms-
歐朋 -o-
早期的蘋果瀏覽器（safari） linux konqueror 須要加：-khtml-
谷歌2013 本身開發了新的內核 blink

響應式手機網頁：【更換樣式表（媒體查詢：讓css可以根據瀏覽器寬度來選擇是否被使用，js更換）
；約束視口；流式佈局（讓百分比寫width、padding、margin）】

window對象的事件：onload加載完成； onresize調整尺寸； onsrcoll滾動滾輪。

<script type="text/javascript">
            //更換樣式表，須要在頁面加載的時候執行一次，在瀏覽器尺寸變化的時候也要執行
            gaibian();
            window.onresize = gaibian;
            function gaibian(){
                var kuandu = document.documentElement.clientWidth;
                if(kuandu>600){
                    document.getElementById("mylink").href="css/1.css"
                }else{
                    document.getElementById("mylink").href="css/2.css";
                }
            }
        </script>

css根據寬度更換樣式表（媒體查詢）：

<link rel = "stylesheet" href = "css/1.css" type = "text/css" media="(min-width:800px)">
<link rel = "stylesheet" href = "css/2.css" type = "text/css" media="(max-width:799px)and (min-width:600px)">
<link rel = "stylesheet" href = "css/3.css" type = "text/css" media="(max-width:599px)">

寬度≥800,1.css
799≥寬度≥600 2.css
500≥寬度 3.css
媒體查詢的兼容性 ie9及以上，js檢測寬度更換樣式表是ie6也兼容的

【約束視口】

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

一個id和name爲viewport的meta元標記就表示如今要約束視口了。具體約束規則寫在content中，
每一個約束規則用逗號隔開。
width=device-width -- 命令視口的寬度，變爲設備的寬（以1024*768屏幕爲標準。iphone等手機
一般爲320~380之間不等）
initial-scale=1.0 -- 命令視口默認的縮放等級爲1
minimum-scale=1.0 -- 命令視口最小縮放等級爲1
maximum-scale=1.0 -- 命令視口最大縮放等級爲1
user-scalable=no -- 不容許用戶縮放頁面

當用戶設備寬度大於980的時候，用的pc界面；
當用戶設備寬度在620~979之間，用的pad界面；
當用戶設備寬度小於619的時候，用手機界面。

【輪播圖】
用swipe.js