隨著移動設(shè)備的普及的普及，人們越來越習(xí)慣使用移動設(shè)備來訪問網(wǎng)頁，所以學(xué)會如何開發(fā)移動端頁面是一個前端必備的技能喷斋。
一唁毒、頁面的整體布局
先上圖，做完后的效果如下圖所示：
從圖中很容易發(fā)現(xiàn)星爪，整個頁面有以下一部分組成：
- 頁頭和頁腳
- 輪播圖浆西，也就是banner，作為廣告展示部分
- 整個網(wǎng)站的導(dǎo)航部分
- 攜程的產(chǎn)品位
- 活動部分顽腾，分為特賣匯和熱門活動兩部分
二近零、HTML結(jié)構(gòu)
3-1. HTML整體結(jié)構(gòu)
由于移動端對各種HTML5和CSS3的新特性的支持和好，所以可以采用HTML5的新標(biāo)簽屬性內(nèi)容抄肖，如下：
<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>
<!-- 導(dǎo)航部分 -->
<nav></nav>
<!-- 產(chǎn)品 -->
<section class="products"></section>
<!-- 特賣匯 -->
<section class="temaihui"></section>
<!-- 熱門活動 -->
<section class="huodong"></section>
<!-- 頁腳 -->
<footer></footer>
</body>
</html>
注意久信，由于是移動端的頁面，所以需要加上視口標(biāo)簽漓摩，即
<meta name=viewport>
后面content跟的是一些具體屬性裙士，如設(shè)備寬度，縮放程度等管毙，有興趣的同學(xué)可以自己去了解下潮售。
3-2. 詳細的HTML書寫
頭部由兩個div構(gòu)成，一個包裹input搜索框锅风，一個作為用戶中心
特賣匯部分采用了定義列表dl酥诽、dd、dt的展示方式
活動的頭部統(tǒng)一采用h3包裹標(biāo)題皱埠，div攜帶右邊的圖文
剩余的部分都是采用無序列表的形式展現(xiàn)ul肮帐、li，在li里面寫具體的信息
網(wǎng)頁的底部使用a標(biāo)簽包裹一些跳轉(zhuǎn)鏈接
三边器、CSS編寫
使用了便于頁面縮放的單位rem训枢，作為編寫單位，配合百分比布局實現(xiàn)整體框架布局忘巧，圓角部分是由border-radius實現(xiàn)的恒界。當(dāng)該屬性的值為50%，就能顯示一個圓砚嘴，常用該特性做頭像框十酣。
頭部，采用固定定位fixed的方式布局际长，user部分使用絕對定位耸采，定位到頁面的右上角，搜索寬的大盒子寬度為100%工育；使用padding-right流出右邊user的位置虾宇，內(nèi)部的input設(shè)為100%即可
剩下的部分，都是采用父盒子寬度為100%如绸，子元素根據(jù)需求分配嘱朽，如33%的導(dǎo)航部分旭贬，50%的活動部分
由于有的地方要加上邊框和內(nèi)邊距，默認的盒模型是采用向外擴張的方式的搪泳，所以一旦加上邊框或者內(nèi)邊距就會超過100%的寬度稀轨，變?yōu)樯舷聝尚信帕校@不是我們需要的森书，故每一處用到的邊框的標(biāo)簽靶端，都要加上box-sizing為boder-box的聲明，讓實際分配寬度等于分配的百分比凛膏，讓盒子內(nèi)部留出邊框和內(nèi)邊距的空間杨名。
四、移動端的輪播效果
移動端的輪播效果的觸發(fā)是由觸摸事件觸發(fā)的猖毫，不同于PC端的點擊事件台谍，故要采用新的書寫方式。
首先執(zhí)行一個初始化函數(shù)吁断，讓輪播圖的寬度等于設(shè)備的寬度
function set(){
//var windowWidth = document.documentElement.clientWidth;
var windowWidth = document.documentElement.clientWidth;
var bannerWidth = parseInt(getComputedStyle(banner)["width"]);
//設(shè)置banner高度
banner.style.height = bannerWidth / (1242 / 248) + "px";
//設(shè)計圖540寬趁蕊，540狀態(tài)下的font-size我們自己設(shè)置了一個15px。
//所以當(dāng)前的字號就要按比例來：
// document.documentElement.style.fontSize = 15 * (windowWidth / 540) + "px";
}
接著寫事件監(jiān)聽函數(shù)仔役，移動的觸摸事件touch掷伙，有三部分組成，分別為touchstart又兵，touchmove和touchend
//事件監(jiān)聽
banner.addEventListener("touchstart",touchstartHandler,false);
banner.addEventListener("touchmove",touchmoveHandler,false);
banner.addEventListener("touchend",touchendHandler,false);
移動端觸摸任柜，又分為點擊和滑動兩種，判斷的依據(jù)就是滑動的距離和操作的時間戳（開始觸摸時的時間減去結(jié)束觸摸時的時間）
//如果你像右邊滑動超過了屏幕的一半沛厨，或者你向右邊滑動且時間小于500宙地，就認為滑動成功
if(distance >= windowWidth / 2 || (distance > 30 && time < 300))
然后根據(jù)具體的左右滑動做相應(yīng)的處理即可。
五逆皮、總結(jié)
移動端頁面的開發(fā)宅粥，能采用百分比布局的地方盡量采用百分比布局，如果一定要寫單位电谣，那么請用rem或者em（不推薦）為單位秽梅，便于使用@media時放大或縮小整個頁面，還有辰企，在開發(fā)移動端時风纠，一些新的特性，能使用的就放心大膽的使用牢贸，如果實在不知道能不能用，可以訪問該網(wǎng)站can i use.
