代码下载地址
链接：http://pan.baidu.com/s/1pKXcQM3 密码：qv7n
移动web
2.移动web的基础知识
2.1 pixel 移动开发像素基础
iphone5 分辨率640*1136
px:css pixels 逻辑像素，浏览器使用的抽象单位
dp,pt:device independent pixels 设备无关像素
dpr:devicePixelRatio 设备像素缩放比
计算公式：
1px = dpr*dpr*dp
平面上：1px = 2*2*dp
纬度上：1px = 2*dp
DPI:打印机每英寸可以喷的墨汁点(印刷行业)
PPI：屏幕每英寸的像素数量，即单位英寸内的像素密度
目前，在计算机显示设备参数描述上，二者意思是一样的。
ppi越高，像素数越高，图像越清晰
但可视度越低(小)，系统默认设置缩放比越大
ldpi mdpi hdpi xhdpi
ppi 120 160 240 320
默认缩放比 0.75 1.0 1.5 2.0
Retina屏(高清屏)：dpi都是大于等于2
以iphone5为例子
设备分辨率1136*640dp
根号下(1136*1136+640*640)/4=326ppi
326ppi属于retina屏幕，dpr=2
1px = dpr*dpr*dp
phone5的屏幕为320*568px
2.2 viewport视图
ios的viewport是980px
2.3 viewport_meta标签
布局viewport:document.body.clientWidth
度量viewport:widow.innerWidth
<meta name="viewport" content="width=device-width, initial-scale=1,
user-scalable=no" />
2.4 viewport_coding
设计移动web
方案一：根据设备的实际宽度来设计(常用)
手机宽320px,我们就拿320px设计
方案二：1px = 1dp
缩放0.5。根据设备的物理像素dp等于抽象像素px来设计。1像素边框和高清图片
都不需要额外处理。
3.高效的移动web布局
3.1
响应式布局responsive 高清图片retina px,em,rem
盒模型background-size font-size 弹性滚动 多行文本溢出
flex弹性盒子布局 高效居中方案 等比例填充列行
3.2 flexbox弹性盒子布局
根据元素个数不同，自动填充容器
.nav{
overflow:hidden;
background-color:#de7c3c;
padding:10px;
display:-webkit-flex;<---------------------
}
.item{
color:#fddfa7;
padding:0 5px;
text-align:center;
flex:1;<---------------------
}
display:-webkit-flex;表示使用弹性布局
flex:number;占容器的比例
flex等比划分
flex:1;flex:2;
flex混合划分
width:100px;flex:2;flex:1;
不定宽高的水平垂直居中
.myoff-wrapper{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%,-50%);
border-radius:6px;
background:#fff;
}
【flexbox版】不定宽高的水平垂直居中
.parent{
justify-content:center;//子元素水平居中<---------------------
align-items:center;//子元素垂直居中<-------------------------
display:-webkit-flex;
}
3.3 flex弹性盒模型
项目代码地址https://github.com/williamtank/welcome_mobile
兼容性：
ios可以使用最新的flex布局
android4.4以下，只能兼容旧版的flexbox布局
android4.4及以上，可以使用最新的flex布局
新flex布局 旧flexbox布局
display:-webkit-flex; display:-webkit-flex-box;
-webkit-flex:1; -webkit-flex-box:1;
justify-content:center; box-pack:center;
align-items:center; box-align:center;
3.4 响应式设计
媒体查询
@media screen and (max-width:1024px){}
媒体类型：
screen(屏幕)
print(打印机)
handheld(手持设备)
all(通用)
常用媒体查询参数：
width-视口宽度
height-视口宽度
device-width:设备的宽度
device-height:设备的高度
orientation:检查设备处于横向(landscape)还是竖屏(portrait)
响应式设计
设计点一：百分比布局
仅仅使用媒体查询来适应不同的固定宽度设计，只会从一组css到另一组css的切
换。两者之间的没有任何平滑渐变。当没有命中媒体查询时，表现就会变得不可
控制。
设计点二：弹性图片
img{
max-width:100%;
}
设计点三：重新布局，显示和隐藏
1.同比例缩减元素尺寸
2.调整也没结构布局
3.隐藏冗余的元素
3.5 移动web特别样式处理
高清图片：
100*100px-->100*100dp
正常是100*100的，iphone5上就用50*50的，iphone6上就用37.5*37.5的
一像素边框：
同样是retina屏幕下的问题，根本原因是：1px 使用2dp渲染
sacleY（.5）
.sidebar .folder li{
padding:8px 0 8px 15px;
color:#7c7c7c;
cursor:pointer;
position:relative;
}
.folder li + li:before{
position:absolute;
top:-1px;
left:0;
content:'';
width:100%;
height:1px;
border-top:1px soldi #ddd;
-webkit-transform:scaleY(0.5);
}
相对单位rem:
em:是根据父节点的font-size为相对单位
rem:是根据html的 font-size为相对单位
em在多层嵌套下，不好用
rem更加能作为全局统一设置的度量
rem的基值设置多少？
rem=screen.width/20
//默认320px
html{font-size:32px;}
//iphone6
@media(min-device-width:375px){
html{font-size:37.5px;}
}
//iphone6 plus
@media(min-device-width:414px){
html{font-size:41.4pxp;}
}
如iphone5上的rem基值为32px,渲染一张64*64px的div，则用2rem*2rem去渲染。
换算公式是：
width:px/rem基值
height:px/rem基值
多行文本溢出...:
//单行文本溢出...对title类的使用多
.inaline{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
//多行文本溢出...
.intwoline{
display:-webkit-box !important;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical; //垂直
-webkit-line-clamp:2; //共显示2行
}
4.终端交互优化
4.1
在移动设备上没有了鼠标输入，hover等一些鼠标事件不再生效。取而代之是更人
性的触摸事件touch.
不用click事件-->tap事件基础
弹性滚动-->touch触摸事件
上拉刷新--->下拉下载
4.2 tap基础事件
300毫秒的故事
移动web页面上的click事件响应都要慢上300ms
tap基础事件:
使用tap事件代替click事件
自定义tap事件原理：
在touchstart,touchend时记录时间，手指位置，在touchend时进行比较，如果手
指位置为同意位置(或允许移动一个非常小的位移值)且时间间隔较短(一般认为是
200ms)，且过程中未曾触发过touchmove,即可认为触发了手持设备上的"click"，
一般称为"tap"
移动框架库zepto.js
Tap "点透"的 bug
Tap透传的解决方案：
1.使用缓动动画，过度300ms的延迟
2.中间层dom元素的加入，让中间层接受这个穿透事件，稍后隐藏
3.“上下”都使用tap事件，原理上解决tap透传事件（但不可避免原生标签的
click事件）
4.改用fastclick的库
最新的zepto.js已经去掉这个bug了
4.3 触摸touch
touch基础事件：
触摸才是移动设备的交互的核心事件
touchstart:手指触摸屏幕触发（已经有手指放屏幕上不会触发）
touchmove:手指在屏幕滑动，连续触发
touchend:手指离开屏幕时触发
touchcancel:系统取消touch时候触发(不常用)
触摸事件包含专有的触摸属性：
touches:跟踪触摸操作的touch对象数组
targetTouches:特定事件目标的touch对象数组
changeTouches:上次触摸改变的touch对象数组
每个touch对象包含属性：
clientX:触摸目标在视口中的x坐标
clientY:触摸目标在视口中的y坐标
identifier:标识触摸的唯一id.
pageX:触摸目标在页面中的x坐标(包含滚动)
pageY:触摸目标在页面中的y坐标（包含滚动）
screenX:触摸目标在屏幕中的x坐标
screenY:触摸目标在屏幕中的y坐标
target:触摸的dom节点目标。
bug:
android只会触发一次touchstart,touchmove,touchend不触发
解决方案：
在touchmove中加入：event.preventDefault()。可以去掉bug.
但注意：event.preventDefault()会导致默认行为不发生。如scroll,导致页面不
滚动！
弹性滚动:
当客户端的页面滚动到顶部或底部的时候，滚动条会收缩并让我们多滑动一定距
离。
移动web页面也可以弹性滚动，但有几种情况：
body层滚动：系统特殊化处理
自带弹性滚动,overflow：hidden失效，gif和定时器暂停
局部滚动：
没有弹性滚动，没有滚动惯性，不流畅
局部滚动开启弹性滚动:
body{
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
注意！android不支持原生的弹性滚动，但可以借助三方库iscroll来实现。
下拉刷新：
顶端下拉一小点距离页面弹性滚动向下，例子：兴趣部落
上拉加载:
使用scroll事件，而不是touch事件
android有bug以上内容来自慕课网地址http://www.imooc.com/learn/494
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
