字体
1.使用无衬线字体
2.英文和数字使用helvetica
3.不指定默认的中文字体
系统默认字体：
ios 系统
- 默认中文字体是Heiti SC
- 默认英文字体是Helvetica
- 默认数字字体是HelveticaNeue
android 系统
- 默认中文字体是Droidsansfallback
- 默认英文和数字字体是Droid Sans
winphone 系统
- 默认中文字体是Dengxian(方正等线体)
- 默认英文和数字字体是Segoe
图片
1.图标需要提供两倍大图片
2.使用缩略图
3.首屏外图片延迟加载
4.尽可能使用css3代替图片【箭头、菜单等】
5.max-width: 100%，图片尺寸自适应
设备像素比在1.5以上的都用2x
@设备像素比
设备像素比devicePixelRatio简单介绍
性能
1.压缩静态资源
2.尽可能的使用css3取代js动画
3.低端机上降级处理显示效果，如渐变等【怎么判断低端机？】
4.简单的html层级结构
使用html5和css3
1.最低兼容的ie版本为ie9
2.flex
3.box-sizing:border-box
meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
视窗宽度适应设备宽度，禁止用户缩放
<meta content="yes" name="apple-mobile-web-app-capable" />
启用webapp模式，隐藏工具栏和菜单栏
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
顶栏颜色
<meta name="format-detection" content="telphone=no, email=no" />
电话号码和邮箱识别
交互
1.考虑横竖屏、不同宽度
2.最大化可点击区域
其他
1.移动端页面一般以水果手机为标准设计界面，宽度640像素，重构是按这个大小除以二
2.事件 touchstart --> touchmove -> touchend --》click
响应式设计
1.fluid layout 流动布局，容器宽度定义成浏览器viewport百分比
2.使用媒体查询
3.自适应宽度图片
4.为移动ui改变导航模式
5.改变链接和按钮的样式适于触摸
6.动态字体大小
7.按需加载
8.图形的retina版本
一些常用的插件
iscroll
fullpage
iSlider
EasySlide
