本文是基于zepto框架下的手机移动端网站制作教程，适用于苹果的ios系统，和android系统。随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应 用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢。本文可以帮你解决这个问题。
感谢那些热心的朋友：http://118.186.246.148/hongyepay/ 给予帮助和支持。
本文简介：
1、手机移动端页面的自适应
2、手机触摸手动滑动效果

一、header信息的设置（自适应）
　　　1、声明信息 <!DOCTYPE HTML>
　　　2、编码设置 <meta charset="UTF-8"> 
　　　3、移动设备特别设置（重要声明！）
　　　<meta content="width=device-width,user-scalable=no" name="viewport"> 

Viewport说明：该设置可使我们开发出的页面/产品 大小可适应各种高端移动设备
width=device-width 为设备的宽度.
user-scalable=no/yes 此功能为用户调整缩放。默认为yes。一般设置为no
PS:初次尝试制作移动端页面。亲们，由于我没有加上面的viewport声明，结果导致页面狼狈不堪。 

添加前=》
52369a952fa61.png
添加后=》
52369ad1ab9f0.png

二、手机触摸手动滑动效果
1、触摸屏效果滚动组件（js必须包含的部分） 

<!--触摸屏效果滑动组件-->

<scripttype="text/javascript"src="./js/touch.js"></script>

<scripttype="text/javascript"src="./js/zepto.extend.js"></script>

<scripttype="text/javascript"src="./js/zepto.ui.js"></script>

<scripttype="text/javascript"src="./js/slider.js"></script>

<!--触摸屏效果滑动组件end-->

复制代码
本人亲测以上4个js必须包含，缺一不可。
2、所要在手机端做滑动效果的部位（html代码部分）  

<divclass="head_nav_C"id="hongye_nav"style="height:60px;">

<divstyle="background-color:white;">

                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

</div>

<divstyle="background-color:white;">

                      bbbbbbbbbbbbbbbbbbbbbbbbbbb

</div>

<divstyle="background-color:white;">

                        cccccccccccccccccccccccccccc

</div>

<divstyle="background-color:white;">

                         ddddddddddddddddddddddddd

</div>

</div>

复制代码
3、js代码块（改代码会在动在要加滑动效果的html代码块中自动生成一块代码）  

<script>

Zepto(function($){//自动加载zepto组件

        $("#hongye_nav").slider({//为html 对应的id部分最佳slider属性

            autoPlay    : false, //是否自动

            showDot     : false,

            loop        : true,//是否循环

        });

    })

</script>

复制代码
4、加载slider.css样式  

<linkrel="stylesheet"type="text/css"href="css/slider.css"/>

复制代码
附：
另外一种简单的写法(适用于幻灯)
html代码部分
<div id=”fla”>
　　<img lazyload=”p_w_picpaths/img2.jpg” />
　　<img lazyload=”p_w_picpaths/img3.jpg” />
</div>
2、js代码部分
<script>
//创建slider组件
$('#fla').slider();
</script>

附：小知识
一、字体效果
color:#FFF 定义字体的颜色
text-shadow:0 0 2px #146F61;(css3.0特效)
CSS3.0的文字阴影 text-shadow
语法：text-shadow: h-shadow v-shadow blur color;
也就是
text-shadow：【x轴（x offset） y轴（Y offst） 模糊半径（Blur） 颜色（color）】
例如：text-shadow: 5px 5px 5px #FF0000;

二、盒子模型圆角效果
border-radius 属性
例子：
div
{
border:2px solid;
border-radius:25px;
}
等价于：
div{
border:2px solid;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
}
实例地址：打开微信扫一扫！
52369c2a61c68.png
52369c486911e.png 

http://www.thinkphp.cn/extend/461.html