| 作品

前端作品集（二）移动端页面开发--携程网

随着移动设备的普及的普及，人们越来越习惯使用移动设备来访问网页，所以学会如何开发移动端页面是一个前端必备的技能。

一、页面的整体布局

先上图，做完后的效果如下图所示：
网站预览
从图中很容易发现，整个页面有以下一部分组成：

  1. 页头和页脚
  2. 轮播图，也就是banner，作为广告展示部分
  3. 整个网站的导航部分
  4. 携程的产品位
  5. 活动部分，分为特卖汇和热门活动两部分

二、HTML结构

3-1. HTML整体结构

由于移动端对各种HTML5和CSS3的新特性的支持和好，所以可以采用HTML5的新标签属性内容，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<head>
	<meta charset="UTF-8">
	<title>携程在手·说走就走</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</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="width=device-width, initial-scale=1.0">
后面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端的点击事件，故要采用新的书写方式。

首先执行一个初始化函数，让轮播图的宽度等于设备的宽度

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
//事件监听
banner.addEventListener("touchstart",touchstartHandler,false);
banner.addEventListener("touchmove",touchmoveHandler,false);
banner.addEventListener("touchend",touchendHandler,false);

移动端触摸，又分为点击和滑动两种，判断的依据就是滑动的距离和操作的时间戳（开始触摸时的时间减去结束触摸时的时间）

1
2
//如果你像右边滑动超过了屏幕的一半，或者你向右边滑动且时间小于500，就认为滑动成功
if(distance >= windowWidth / 2 || (distance > 30 && time < 300))

然后根据具体的左右滑动做相应的处理即可。

五、总结

移动端页面的开发，能采用百分比布局的地方尽量采用百分比布局，如果一定要写单位，那么请用rem或者em（不推荐）为单位，便于使用@media时放大或缩小整个页面，还有，在开发移动端时，一些新的特性，能使用的就放心大胆的使用，如果实在不知道能不能用，可以访问该网站can i use.

最后，附上项目源码：GitHub项目仓库
项目预览：点击我