移动web开发基础学习笔记
写在前面
这篇文章并不是我写的教程，而是看了慕课网碧仔老师的课程《Hello，移动WEB》而做的笔记。
我觉得这个课程十分适合有一定web前端经验，但没有接触过移动web开发的朋友学习，他讲的知识比较基础，老师功底很好，讲课风格也很不错，课程很容易听懂，我觉得听了之后收获很大。希望感兴趣的同学可以去看看碧仔老师的这个课程，课程不长，一晚上就可以看完。
然后我写的这篇文章呢，就是在看此教程时做的笔记，只是记下了大概的知识点，方便自己以后查阅。
大纲：
像素基础->viewport->定制化移动web->高效布局->常见移动web问题->交互优化
01 基础知识
1-1 pixel像素基础
- px：css pixels 逻辑像素，浏览器使用的抽象单位
- dp，pt：device independent pixels 设备无关像素
- dpr：devicePixelRatio 设备像素缩放比
平面上 1px = (dpr)^2*dp
维度上 1px = dpr*dp
1-2 Viewport
把整个页面缩放放在屏幕中，页面缩放在一个980px（ios）的viewport
-
visual viewport（上层，视口，缩放）
-
layout viewport（底层，渲染）
为什么不使用默认的980px的布局viewport？
- 宽度不可控制，不同系统不同设备的默认值都可能不同
- 页面缩小显示，交互不友好
- 链接不可点
- 有缩放，缩放后又有滚动
- font-size为40px才等于pc上的12px同等大小，不规范
1-3 viewport Meta标签
用meta标签改造viewport
<meta name="viewport" content="name=value,name=value">
- width：设置布局viewport的特定值（“device-width”）
- initial-scale：设置页面的初始缩放
- minimum-scale：最少缩放
- maximum-scale：最大缩放
- user-scalable：用户是否能缩放
<meta name="viewport" content="width=device-width">
移动web最佳viewport设置：三者为一
【布局viewport】=【设备宽度】=【度量viewport】
<mete name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
02 移动布局
2-1 Flexbox弹性盒子布局
display:-webkit-flex //标示使用弹性布局
flex:<num> //占容器比例
不定宽高的水平垂直居中
.myoff-wrapper{
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
}
【flexbox版】不定宽高的水平垂直居中
.parent{
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
display:-webkit-flex;
}
2-2 Flexbox弹性盒子布局
兼容性问题：新版flex不支持android 4.4以下版本
新flex布局
display:-webkit-flex;
-webkit-flex:1;
justify-content:center;
align-items:center;
旧flexbox布局
display:-webkit-flex-box;
-webkit-flex-box:1;
box-pack:center;
box-align:center;
2-3 响应式设计
当页面大小改变时，适应屏幕宽度进行某些样式调整
媒体查询
@media screen and (max-width:1024px){
#pagewrap{
width:95.5%;
}
#content{
width:62%;
}
#content .article .hr{
width:66%;
margin-left:34%;
}
}
设计点一：百分比布局（建议）
满足主流宽高即可，百分比布局更利于非主流宽高的表现。
设计点二：弹性图片
图片外div，图片100%，div宽高随屏幕大小变化。
设计点三：重新布局，显示与隐藏
- 同比例缩减元素尺寸
- 调整页面元素布局
- 隐藏冗余的元素
建议绝对定位
响应式设计思考
性能不是最优，因为会下载冗余样式，但是它可以减少重复开发。
2-4 移动web特殊样式处理
高清图片
一像素边框
同样是retina屏幕下的问题，根本原因：1px使用2dp渲染
解决方法：-webkit-transform: sacleY(.5)
相对单位
px略显固定，使用相对单位更能体验页面兼容性
- em：根据父节点的font-size为相对单位
- rem：根据html的font-size为相对单位
em在多层嵌套下，变得非常难以控制；rem更加能作为全局统一设置的度量。
使用方法： 使用手机屏幕设置html的font-size，比如rem=screen.width/20
但是字体应该使用px，而不是用rem。
多行文本溢出
单行文本溢出
.inaline{
overflow:hidden;
white-space:nowwrap;
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; //行数
}
03 终端交互优化
3-1 Tap基础事件
300毫秒的故事
click事件300毫秒的延迟，用于判断双击。
Tap基础事件
自定义tap事件原理：在touchstart和touchend记录事件和位置，若位置相差合理则称触发了“tap”。
“点透”BUG原因就是300ms延迟。
3-2 触摸touch
触摸才是移动设备的交互核心事件
- touchstart：手指触摸屏幕触发（已经有手指放屏幕上不会触发）
- touchmove：手指在屏幕滑动，连续触发
- touchend：手指离开屏幕时触发
- touchcancel：系统取消touch时触发（不常用）
触摸事件包含专有的触摸属性
- touches：跟踪触摸操作的touch对象数组
- targetTouches：特定事件目标的touch对象数组
- changeTouches：上次触摸改变的touch对象数组
这些数组中包含touch对象，每个touch对象包含属性
-clientX：触摸目标在视口中的x坐标
-clientY：触摸目标在视口中的y坐标
-identifier：标识触摸的唯一ID
-pageX：触摸目标在页面中的x坐标（包含滚动）
-pageY：触摸目标在页面中的y坐标（包含滚动）
-screenX：触摸目标在屏幕中的x坐标
-screenY：触摸目标在屏幕中的y坐标
-target：触摸的DOM节点目标
