标签：
接触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事件
（参考jquerymobile）
Touch基础事件
触摸才是移动设备的交互的核心事件
touchstart
touchmove
touchend
移动端弹性滚动
body {
overflow:scroll;
-webkit-overflow-scrolling: touch;
}
Android不支持原生的弹性滚动，
但可以借助第三方库iScroll来实现
也可以自己模拟下拉刷新的动画，向下滑动到一定的程度，显示动画并刷新加载页面。
标签：
原文地址：http://www.cnblogs.com/lqcdsns/p/5655429.html
