隨著移動設備的普及的普及，人們越來越習慣使用移動設備來訪問網頁，所以學會如何開發移動端頁面是一個前端必備的技能。
一、頁面的整體布局
先上圖，做完后的效果如下圖所示：
從圖中很容易發現，整個頁面有以下一部分組成：
- 頁頭和頁腳
- 輪播圖，也就是banner，作為廣告展示部分
- 整個網站的導航部分
- 攜程的產品位
- 活動部分，分為特賣匯和熱門活動兩部分
二、HTML結構
3-1. HTML整體結構
由于移動端對各種HTML5和CSS3的新特性的支持和好，所以可以采用HTML5的新標簽屬性內容，如下：
<head>
<meta charset="UTF-8">
<title>攜程在手·說走就走</title>
<meta name=viewport content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
</head>
<body>
<!-- 頭部 -->
<header></header>
<!-- banner -->
<section class="banner"></section>
<!-- 導航部分 -->
<nav></nav>
<!-- 產品 -->
<section class="products"></section>
<!-- 特賣匯 -->
<section class="temaihui"></section>
<!-- 熱門活動 -->
<section class="huodong"></section>
<!-- 頁腳 -->
<footer></footer>
</body>
</html>
注意，由于是移動端的頁面，所以需要加上視口標簽，即
<meta name=viewport>
后面content跟的是一些具體屬性，如設備寬度，縮放程度等，有興趣的同學可以自己去了解下。
3-2. 詳細的HTML書寫
頭部由兩個div構成，一個包裹input搜索框，一個作為用戶中心
特賣匯部分采用了定義列表dl、dd、dt的展示方式
活動的頭部統一采用h3包裹標題，div攜帶右邊的圖文
剩余的部分都是采用無序列表的形式展現ul、li，在li里面寫具體的信息
網頁的底部使用a標簽包裹一些跳轉鏈接
三、CSS編寫
使用了便于頁面縮放的單位rem，作為編寫單位，配合百分比布局實現整體框架布局，圓角部分是由border-radius實現的。當該屬性的值為50%，就能顯示一個圓，常用該特性做頭像框。
頭部，采用固定定位fixed的方式布局，user部分使用絕對定位，定位到頁面的右上角，搜索寬的大盒子寬度為100%；使用padding-right流出右邊user的位置，內部的input設為100%即可
剩下的部分，都是采用父盒子寬度為100%，子元素根據需求分配，如33%的導航部分，50%的活動部分
由于有的地方要加上邊框和內邊距，默認的盒模型是采用向外擴張的方式的，所以一旦加上邊框或者內邊距就會超過100%的寬度，變為上下兩行排列，這不是我們需要的，故每一處用到的邊框的標簽，都要加上box-sizing為boder-box的聲明，讓實際分配寬度等于分配的百分比，讓盒子內部留出邊框和內邊距的空間。
四、移動端的輪播效果
移動端的輪播效果的觸發是由觸摸事件觸發的，不同于PC端的點擊事件，故要采用新的書寫方式。
首先執行一個初始化函數，讓輪播圖的寬度等于設備的寬度
function set(){
//var windowWidth = document.documentElement.clientWidth;
var windowWidth = document.documentElement.clientWidth;
var bannerWidth = parseInt(getComputedStyle(banner)["width"]);
//設置banner高度
banner.style.height = bannerWidth / (1242 / 248) + "px";
//設計圖540寬，540狀態下的font-size我們自己設置了一個15px。
//所以當前的字號就要按比例來：
// document.documentElement.style.fontSize = 15 * (windowWidth / 540) + "px";
}
接著寫事件監聽函數，移動的觸摸事件touch，有三部分組成，分別為touchstart，touchmove和touchend
//事件監聽
banner.addEventListener("touchstart",touchstartHandler,false);
banner.addEventListener("touchmove",touchmoveHandler,false);
banner.addEventListener("touchend",touchendHandler,false);
移動端觸摸，又分為點擊和滑動兩種，判斷的依據就是滑動的距離和操作的時間戳（開始觸摸時的時間減去結束觸摸時的時間）
//如果你像右邊滑動超過了屏幕的一半，或者你向右邊滑動且時間小于500，就認為滑動成功
if(distance >= windowWidth / 2 || (distance > 30 && time < 300))
然后根據具體的左右滑動做相應的處理即可。
五、總結
移動端頁面的開發，能采用百分比布局的地方盡量采用百分比布局，如果一定要寫單位，那么請用rem或者em（不推薦）為單位，便于使用@media時放大或縮小整個頁面，還有，在開發移動端時，一些新的特性，能使用的就放心大膽的使用，如果實在不知道能不能用，可以訪問該網站can i use.
