接触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来实现
也可以自己模拟下拉刷新的动画,原理:向下滑动到一定的程度,显示动画并刷新加载页面。