Web App资源
布局方法：
1、rem和百分比流体布局的对比，以及为何要选用rem来做移动端适配布局：http://isux.tencent.com/web-app-rem.html（rem布局存在的bug和解决办法：http://ons.me/）
2、box-flex弹性盒模型（伸缩式布局）：http://www.cnblogs.com/acmilan/archive/2012/03/02/2377812.html（旧版） flexbox布局：http://www.w3cplus.com/css3/flexbox-basics.html（新版）
3、CSS3引入的"vm"和"vh"基于宽度/高度相对于窗口大小，"vm"="view width"，"vh"="view height"，以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。1vh等于1/100的视口高度。例如，浏览器高度600px, 1vh=600px/100=6px。同理，如果视口宽度为1000px，1vw=1000px/100=10px。vh和vm依据于视口的高度和宽度，相对的，vmin和vmax则关于视口高度和宽度两者的最小或者最大值。比如，浏览器的宽度设置为1200px，高度设置为700px， 1vmin=7px，1vmax=12px。如果宽度设置为800px,高度设置为1000px, 1vmin就等于8px, 1vmax则为10px。
4、语法结构及用法:
@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}
//横屏
@media screen and (orientation:landscape){
}
//竖屏
@media screen and (orientation:portrait){
}
CSS3-Media Query的两种应用响应式布局的方式：
1.在头部head标签中，引用外联样式link标签中添加media="only screen and (max-width: 480px)"
2.在样式style标签中添加：@media screen and (min-width: 480px){样式属性}
优秀的Web App前端框架：