随着移动设备的普及的普及，人们越来越习惯使用移动设备来访问网页，所以学会如何开发移动端页面是一个前端必备的技能。
一、页面的整体布局
先上图，做完后的效果如下图所示：
网站预览
从图中很容易发现，整个页面有以下一部分组成：
- 页头和页脚
- 轮播图，也就是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.
网友评论