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

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

一、页面的整体布局

先上图，做完后的效果如下图所示：

网站预览

从图中很容易发现，整个页面有以下一部分组成：

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

二、HTML结构

3-1. HTML整体结构

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


    
    携程在手·说走就走

注意，由于是移动端的页面，所以需要加上视口标签，即

后面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.