移动页面开发

[ 基础知识 ] 像素？！ + 长度单位？！ + 远程调试？！

[ 视口？！ ] PC 浏览器中，窗口就是约束 CSS 布局的视口。即，在桌面上，视口的宽度和浏览器窗口的宽度一致。

而在手机端，

布局视口，会限制 CSS 布局；

视觉视口，表示浏览器的可视区域，决定用户看到什么；

理想视口，是对于特定设备的特定浏览器的布局视口的一个理想尺寸。

整体来说，移动页面最理想的状态是：避免滚动条且不被默认缩放处理，这可以通过屏幕适配来进行控制，并改变浏览器默认的布局视口（layout viewport）的宽度。

[ 屏幕适配 ] 使用 meta 视口标签，设置 viewport？！ // 快捷键为 meta:vp + Tab

屏幕适配是移动端开发的核心。meta 视口标签存在的主要目的是让布局视口的尺寸和理想视口的尺寸匹配。

viewport 是由 apple 公司为了解决移动设备浏览器渲染页面而提出的解决方案，后来被其他移动设备厂商所采纳。桌面浏览器不支持，也不需要它，因为它们没有理想视口的概念。

IE 是一个例外：在手机上它支持meta视口标签，但最好使用@-ms-viewport。

<meta name="viewport" content=" width=device-width, // 设置布局视口的宽度为特定的值 user-scalable=no, // 是否阻止用户进行缩放 initial-scale=1.0, // 设置页面的初始缩放程度和布局视口的宽度 maximum-scale=1.0, // 设置了最大缩放程度(用户可放大的程度) minimum-scale=1.0" // 设置了最小缩放程度(用户可缩小的程度) > // height:设置布局视口的高度(未被实现)

1
2
3
4
5
6
7
8
9

<meta name="viewport" content="
    width=device-width,         // 设置布局视口的宽度为特定的值
    user-scalable=no,           // 是否阻止用户进行缩放
    initial-scale=1.0,          // 设置页面的初始缩放程度和布局视口的宽度
    maximum-scale=1.0,          // 设置了最大缩放程度(用户可放大的程度)
    minimum-scale=1.0"          // 设置了最小缩放程度(用户可缩小的程度)
>

// height:设置布局视口的高度(未被实现)

[ 适配方案 - 百分比宽度 ]设置页面宽度为百分比，避免使用具体的固定宽度，具体见demo：移动Web开发。

父元素高度由子元素的内容自动撑开，避免使用具体的固定高度。

// 特别说明 — 在项目文件夹结构方面：

css文件夹：base.css（公共样式） + index.css（页面样式）

图片文件夹：images（静态图标/片）+ uploads（动态的数据图片）

进行移动页面开发，并非单纯的将复杂的PC页面完全转化为移动端页面。它通常有 2 种不同的选择：

Plan A：[ 移动Web开发 ] 制作适合移动端展示的页面（新的适应于移动端的页面）

Plan B：[ 响应式开发 ] 响应式（PC、移动为同一套页面）

移动Web开发（京东首页）

代码示例 — 移动端京东项目实战？！

[1] 设置公共样式 base.css

/*公共样式*/

/*1.csreset*/
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{
	margin:0;padding:0;
	/*设置盒模型*/
	box-sizing: border-box;
	/*去除移动端特有的点击高亮效果*/
	-webkit-tap-highlight-color:transparent;
	/*防止在winPhone和ISO中，因旋转屏幕而造成的字体大小的改变*/
    -ms-text-size-adjust:100%; 
    -webkit-text-size-adjust:100%;
}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
/*设置默认字体系列*/
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}
/*清除浮动*/
.clearfix:before,.clearfix:after{content:".";display:block;clear:both;
	height:0;overflow:hidden;visibility:hidden;
}
.clearfix{zoom:1;}

/*2.添加新的样式*/
/*...*/

/*公共样式*/

/*1.csreset*/

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{

margin:0;padding:0;

/*设置盒模型*/

box-sizing: border-box;

/*去除移动端特有的点击高亮效果*/

-webkit-tap-highlight-color:transparent;

/*防止在winPhone和ISO中，因旋转屏幕而造成的字体大小的改变*/

-ms-text-size-adjust:100%;

-webkit-text-size-adjust:100%;

}

header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}

table{border-collapse:collapse;border-spacing:0;}

caption,th{text-align:left;font-weight:normal;}

html,body,fieldset,img,iframe,abbr{border:0;}

i,cite,em,var,address,dfn{font-style:normal;}

[hidefocus],summary{outline:0;}

li{list-style:none;}

h1,h2,h3,h4,h5,h6,small{font-size:100%;}

sup,sub{font-size:83%;}

pre,code,kbd,samp{font-family:inherit;}

q:before,q:after{content:none;}

textarea{overflow:auto;resize:none;}

label,summary{cursor:default;}

a,button{cursor:pointer;}

h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}

del,ins,u,s,a,a:hover{text-decoration:none;}

/*设置默认字体系列*/

body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}

body{background:#fff;}

a,a:hover{color:#333;}

/*清除浮动*/

.clearfix:before,.clearfix:after{content:".";display:block;clear:both;

height:0;overflow:hidden;visibility:hidden;

}

.clearfix{zoom:1;}

/*2.添加新的样式*/

/*...*/

[2] 页面架构：设置整体布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 移动端设置viewport -->
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
	<!-- 引入公共样式 -->
	<link rel="stylesheet" href="../css/base.css">
	<title>移动Web开发</title>
</head>
<body>
<div class="jd_layout">
	<!-- 搜索块 -->
	<div class="jd_search"></div>
	<!-- 轮播图 -->
	<div class="jd_banner"></div>
	<!-- 导航块 -->
	<div class="jd_nav"></div>
	<!-- 产品块 -->
	<div class="jd_product"></div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>移动Web开发</title>

</head>

<body>

</div>

</body>

</html>

[2-1] 页面样式设置 index.css

<!-- 引入首页样式 -->
<link rel="stylesheet" href="../css/index.css">

1 2	<!-- 引入首页样式 --> <link rel="stylesheet" href="../css/index.css">

// 调试状态下，选择responsive，可以对移动页面大小进行拖动，可以发现其存在最大/最小宽度。

.jd_layout{
	width: 100%;
	/*最小宽度*/
	min-width: 320px;
	/*最大宽度*/
	max-width: 640px;
	margin: 0 auto;
	/*background-color: #ccc;*/
	/*height: 1000px;*/
}

.jd_layout{

width: 100%;

/*最小宽度*/

min-width: 320px;

/*最大宽度*/

max-width: 640px;

margin: 0 auto;

/*background-color: #ccc;*/

/*height: 1000px;*/

}

[2-2] 页面制作：以 “搜索块” 为例

<!-- 搜索块 -->
<div class="jd_search">
	<a href="javascript:;" class="jd_logo"></a>
	<form action="" class="jd_searchBox">
		<input type="text">
	</form>
	<a href="javascript:;" class="jd_login">登录</a>
</div>

</form>

</div>

通过responsive状态下的不断左右拖动，发现其存在的规律：

// 实现方式：

1. f lex：1; 可能存在兼容性问题

2. 中间 margin:0 100px； + 左右两个通过绝对定位 // 100px为自定义，可能是其他

.jd_search{ width:100%; height: 40px; background-color: #ccc; position: relative; } /*左右两侧通过定位来实现*/ .jd_logo{ width: 100px; height: 100%; display: block; background-color: pink; position: absolute; left: 0; top: 0; } .jd_login{ width: 100px; height: 100%; display: block; background-color: blue; position: absolute; right: 0; top: 0; } .jd_searchBox{ /*宽度参照父容器，不能人为设置具体的宽度*/ margin: 0 100px; height: 100%; background-color: red; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.jd_search{
width:100%;
height: 40px;
background-color: #ccc;
position: relative;
}
/*左右两侧通过定位来实现*/
.jd_logo{
width: 100px;
height: 100%;
display: block;
background-color: pink;
position: absolute;
left: 0;
top: 0;
}
.jd_login{
width: 100px;
height: 100%;
display: block;
background-color: blue;
position: absolute;
right: 0;
top: 0;
}
.jd_searchBox{
/*宽度参照父容器，不能人为设置具体的宽度*/
margin: 0 100px;
height: 100%;
background-color: red;
}

3. 中间 padding：0 100px； + 左右两个通过绝对定位

[3] 动态效果：以 “搜索块” 为例 // 移动端类似 jQuery的库：zepto.js（待）— touch事件

<!--引入首页的js文件-->
<script src="./js/index.js"></script>

1 2	<!--引入首页的js文件--> <script src="./js/index.js"></script>

window.onload=function(){ searchEffect(); } /*搜索框背景渐变动态效果*/ function searchEffect(){ /*头部搜索块的js效果*/ /*1.获取当前banner的高度*/ var banner =document.querySelector(".jd_banner"); var bannerHeight=banner.offsetHeight; /*获取header搜索块*/ var search=document.querySelector(".jd_search"); /*2.获取当前屏幕滚动时，banner滚动出屏幕的距离*/ window.onscroll=function(){ var offsetTop=document.body.scrollTop; /*3.计算比例值，获取透明度，设置背景颜色的样式*/ var opacity=0; /*判断，如果当banner还没有完全滚出屏幕，那么才有必要计算透明度和设置透明度*/ if(offsetTop < bannerHeight){ opacity=offsetTop/bannerHeight; /*设置样式*/ search.style.backgroundColor="rgba(233,35,34,"+opacity+")"; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

window.onload=function(){
    searchEffect();
}

/*搜索框背景渐变动态效果*/
function searchEffect(){
    /*头部搜索块的js效果*/
    /*1.获取当前banner的高度*/
    var banner =document.querySelector(".jd_banner");
    var bannerHeight=banner.offsetHeight;
    /*获取header搜索块*/
    var search=document.querySelector(".jd_search");
    /*2.获取当前屏幕滚动时，banner滚动出屏幕的距离*/
    window.onscroll=function(){
        var offsetTop=document.body.scrollTop;
        /*3.计算比例值，获取透明度，设置背景颜色的样式*/
        var opacity=0;
        /*判断，如果当banner还没有完全滚出屏幕，那么才有必要计算透明度和设置透明度*/
        if(offsetTop < bannerHeight){
            opacity=offsetTop/bannerHeight;
            /*设置样式*/
            search.style.backgroundColor="rgba(233,35,34,"+opacity+")";
        }
    }
}

~~[4] 移动端的点击事件 — tab 事件（了解）~~ // click事件在移动端存在延迟的现象

/*封装移动端的tap点击事件*/

var mclick={
    /*dom:传入的dom元素让我们可以为任意的元素添加tap事件*/
    tap:function(dom,callback){
        /*判断是否传入对象同时对象应该是一个dom元素*/
        if(!dom || typeof  dom!="object"){
            return;
        }
        var startTime,startX,startY;
        dom.addEventListener("touchstart",function(e){
            /*判断是否只有一根手指进行操作*/
            if(e.targetTouches.length > 1){ //说明不止一个手指
                return;
            }
            /*记录手指开始触摸的时间*/
            startTime=Date.now();
            /*记录当前手指的坐标*/
            startX= e.targetTouches[0].clientX;
            startY= e.targetTouches[0].clientY;
            /*来做一些与事件相关的初始化操作*/
        })

        /*touchend：当手指松开时候触发，意味着当前元素上已经没有手指对象了,所以无法通过targetTouches来获取手指对象*/
        dom.addEventListener("touchend",function(e){
            /*判断是否只有一根手指进行操作*/
            if(e.changedTouches.length > 1){ //说明不止一个手指
                return;
            }
            if(Date.now()-startTime > 150){ //长按操作
                return;
            }
            /*判断松开手指时的坐标与触摸开始时的坐标的距离差异*/
            var endX=e.changedTouches[0].clientX;
            var endY=e.changedTouches[0].clientY;
            /*这里暂且将距离差异定为6*/
            if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){
                console.log("这就是移动端的单击事件--tap事件");
                /*执行tap事件响应后的处理操作*/
                /*判断用户是否传入的回调函数*/
                callback && callback(e);
            }
        })
    }
};

// 使用tab事件
mclick.tab(dom,function(){
    // 点击操作
});

/*封装移动端的tap点击事件*/

var mclick={

/*dom:传入的dom元素让我们可以为任意的元素添加tap事件*/

tap:function(dom,callback){

/*判断是否传入对象同时对象应该是一个dom元素*/

if(!dom || typeof dom!="object"){

return;

}

var startTime,startX,startY;

dom.addEventListener("touchstart",function(e){

/*判断是否只有一根手指进行操作*/

if(e.targetTouches.length > 1){ //说明不止一个手指

return;

}

/*记录手指开始触摸的时间*/

startTime=Date.now();

/*记录当前手指的坐标*/

startX= e.targetTouches[0].clientX;

startY= e.targetTouches[0].clientY;

/*来做一些与事件相关的初始化操作*/

})

/*touchend：当手指松开时候触发，意味着当前元素上已经没有手指对象了,所以无法通过targetTouches来获取手指对象*/

dom.addEventListener("touchend",function(e){

/*判断是否只有一根手指进行操作*/

if(e.changedTouches.length > 1){ //说明不止一个手指

return;

}

if(Date.now()-startTime > 150){ //长按操作

return;

}

/*判断松开手指时的坐标与触摸开始时的坐标的距离差异*/

var endX=e.changedTouches[0].clientX;

var endY=e.changedTouches[0].clientY;

/*这里暂且将距离差异定为6*/

if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){

console.log("这就是移动端的单击事件--tap事件");

/*执行tap事件响应后的处理操作*/

/*判断用户是否传入的回调函数*/

callback && callback(e);

}

})

}

};

// 使用tab事件

mclick.tab(dom,function(){

// 点击操作

});

[5] 移动端插件的使用 — fastclick / iscroll / swiper 等插件

1. zepoto.js 轻量级移动端类库，内有封装tap、swipe事件，类似jquery.js，引用后可用jquery，也可引用jquery压缩版 http://www.zeptojs.cn/#contents

2. touch.js 移动端触摸事件库，zepto的tap事件可能在某些情况下会出问题，所以用touch.js,使用时参考文档库：http://www.cnblogs.com/Chen-XiaoJun/articles/5826698.html 有拖拽、滑动、旋转等现成的效果

3. hammar.js 类似touch.js

4.fastclick.js 解决click的300ms的延迟和点透bug，通常用tap做点击事件，使用参考：
http://blog.csdn.net/zfy865628361/article/details/49512095

5. annimate.css 动画库里面定义了一些常用的css动画。移动端很吃性能，避免频繁操作dom，所以用css3的动画、过度等，性能好，使用时直接加animated和动画的类名即可。
https://daneden.github.io/animate.css/

6. swiper.js 移动端触摸滑动插件，做轮播效果，效果以及使用参考: http://www.swiper.com.cn/

7.iscroll-4插件解决web-app中区域滚动问题，滑动时有惯性运动，本质：利用css3属性让dom运动
http://www.360doc.com/content/14/0724/11/16276861_396699901.shtml

移动页面开发

移动Web开发（ 京东首页 ）

移动Web开发（京东首页）