《hello,移动web》笔记

http://www.imooc.com/video/9669

Hello，移动WEB

第1章课程介绍
1-1 课程介绍
第2章移动Web的基础知识
2-1 pixel像素基础

px:css pixel 逻辑像素，浏览器使用的抽象单位
dp,pt:device independent pixels 设备无关像素
dpr:devicePixelRatio 设备像素缩放比

计算公式：1px = dpr的平方*dp

iphone5分辨率：640dp*1136dp
为什么iphone5是320px*568px？
iphone5的drp=2，1px=4dp，所以长度上1px=2dp，640dp => 320px；1136dp => 568px

dpi:打印机每英寸可以喷的墨汁点（印刷行业）
ppi:屏幕每英寸的像素数量，即单位英寸内的像素密度
目前，在计算机显示设备参数描述上，二者表达的一样意思

iphone5:
ppi = 根号(1136的平方+640的平方)/4 = 326ppi(视网膜retina屏)
ppi越高，像素数越高，图像越清晰；但可视度越低（小），系统默认设置缩放比越大。

2-2 Viewport视图
为什么不使用默认的980px的布局viewport
.宽度不可控制，不同系统不同设备的默认值都可能不同
.页面缩小版显示，交互不友好
.链接不可点
.有缩放，缩放后又有滚动
.font-size为40px等于pc上12px同等物理大小，不规范

2-3 Viewport_Meta标签
<meta name="viewport" content="name=value,name=value">
.width:设置布局viewport的特定值(device-width)
.initial-scale:设置页面的初始缩放
.minimum-scale:最小缩放
.maximum-scale:最大缩放
.user-scalable:用户能否缩放

document.body.clientWidth
window.innerWidth

最优viewport设置
布局viewport=设备宽度=度量viewport

2-4 Viewport_coding

第3章高效的移动web布局
3-1 章介绍

3-2 Flexbox弹性盒子布
.nav{display:-webkit-flex}
.item{flex:1}

display:-webkit-flex 表示使用弹性布局
flex:num 占容器的比例

flex混合划分：固定一块，其余按比例显示
display:-webkit-flex;
width:100px;flex:2;flex:1;

不定宽高的水平垂直居中css3方案
.myoff-wrapper{
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate()-50%,-50%);
}

flexbox版，不定宽高的水平垂直居中
.parent{
justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;
}

3-3 Flex弹性盒模型
.ios可以使用最新的flex布局
.android4.4以下，只能兼容旧版的flexbox布局
.android4.4及以上，可以使用最新的flex布局

3-4 响应式设计
设计点一：百分比布局
设计点二：弹性图片 img{max-width:100%}
设计点三：重新布局，显示与隐藏

3-5 移动web特别样式处
在移动web页面上渲染图片，为了避免图片产生模糊，图片的宽高应该用物理像素单位渲染，即是100*100的图片，应该使用100dp*100dp
width:(w_value/dpr)px;
height:(h_value/dpr)px;

一像素边框

相对单位rem
为了适应各大屏幕的手机，px略显固定，不能根据尺寸的大小而改变，使用相对单位更能体验页面兼容性

em:是根据父节点的font-size为相对单位
rem:是根据html的font-size为相对单位

一般来说font-size是不使用rem等相对单位。

多行文本溢出
//单行文本溢出
.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;
}

第4章终端交互优化
4-1 章介绍
对click事件say no
弹性滚动
上拉刷新
tap事件基础
touch触摸事件
下拉加载

4-2 Tap基础事件
移动WEB页面上的click事件响应都要慢上300ms（确定是否双击）

用tap事件代替click事件
自定义tap事件原理：
在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置（或允许移动一个非常小的位移值）且时间间隔较短（一般认为是200ms），且过程中未曾触发过touchmove，即可认为触发了手持设备上的click，一般称它为tap

使用移动框架库zepto.js

tap点透的bug

4-3 触摸touch
触摸才是移动设备的交互核心事件
touchstart:手指触摸屏幕触发（已经有手机放屏幕上不会触发）
touchmove:手指在屏幕滑动，连续触发
touchend:手指离开屏幕时触发
touchcancel:系统取消touch时触发

BUG：android只会触发一次touchstart,一次touchmove,touchend不触发

在touchmove中加入：event.preventDefault()可fixedBug

event.preventDefault()会导致默认行为不发生，如scroll，导致页面不滚动

4-4 课程总结