移动web基础

接触retina屏

基础知识（移动Web的基础知识）
排版
布局（高效的移动Web布局）
开发效率
终端交互优化

pixel像素基础
viewport视图
viewport_meta标签
viewport_coding

pt, px
Viewport
640*960
initial-scale=1.0
devicePixelRadio
ppi=√(1136*1136 + 640*640)/4=326ppi

示例：
640*1136的图片能不能在iphone5上完全显示？
iphone5的分辨率 640*1136
iphone5的分辨率是320*568

移动端不能用固定布局，因为要适应设备。
高效布局方案： Flex弹性盒子布局
根据元素的不同，自动填充容器

响应式设计
1. 百分比布局
2. 弹性图片（图片外面有容器）
img {
max-width: 100%
}
3. 重新布局，显示与隐藏

不好：性能不好，不同设备都要下载一大套css代码
好处：减少重复开发

相对单位
em： 是根据父节点的font-size为相对单位【不推荐】
rem：是根据html的font-size为相对单位【推荐】

em 在多层嵌套下，变得非常难以维护
rem 能统一全局

终端交互优化
对click事件say no
tap事件基础
touch触摸事件
下拉加载

使用zepto.js框架的touchstart和touchend模拟tap事件【zepto框架个人强烈不推荐！bug太多！你自己要去处理框架的bug还有你自己的bug，很O疼！】
（参考jquerymobile）

Touch基础事件
触摸才是移动设备的交互的核心事件
touchstart
touchmove
touchend

移动端弹性滚动【优化用户体验】
body {
　　overflow:scroll;
　　-webkit-overflow-scrolling: touch;
}

Android不支持原生的弹性滚动，
但可以借助第三方库iScroll来实现

也可以自己模拟下拉刷新的动画，原理：向下滑动到一定的程度，显示动画并刷新加载页面。