第一章：介绍移动端页面的布局方式和技巧、页面调试方法，以及常见的移动端库和框架，这可以帮助开发人员快速完成移动页面的基础架构。
1.1 页面布局
设备像素： 物理像素（屏幕分辨率），独立像素（CSS像素）
像素密度(PPI)： 表示设备每英寸所拥有的物理像素数目，这个值越高屏幕越清晰。
设备像素比(DPR)： 物理像素和CSS像素的比例， 可以通过 var dpr = window.devicePixelRtio 获得，iPhone的一般都为2，而Android设备没有一个定值，碎片化严重。
关于设备像素、像素密度以及设备像素比等具体的数据可以到网站http://screensiz.es上查看。
Layout Viewport： 移动设备为了完全显示桌面端的页面而默认把viewport设为一个较宽的值。
Visual Viewport： 在浏览器或者App的webView中的可视区域，放大缩小页面时候，度量值随之改变。
Ideal Viewport： 它的宽度并没有一个固定的尺寸，不同的设备之间存在差异。可以理解为屏幕宽度
- 为了将浏览器默认的
Layout Viewport宽度设置为Ideal Viewport的宽度，一般都在head中用到以下代码。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
-
图片模糊问题
当1个位图像素等于1个物理像素时，图片就是清晰的，但是在Retina显示屏等屏幕下，一个位图像中对应了多个物理像素，就会导致图片模糊。
解决方案，将图片原本的尺寸放大一定的倍数，这个倍数便是DPR值，大多数设备的DPR都是2，所以我们一般用二倍图就行，@2x.png
-
使用Media Queries
通过CSS3媒体查询（Media Queries）来为不同设备应用不同的CSS规则。
其实Media Queries就是一系列的样式的合集，使用方式和CSS是一样的。
方式一：用link在<head>外链样式表
<link rel="stylesheel" media="screen and (max-width:320px)" href="ip5.css" />
方式二：直接写入<head>的style里
@media screen and (max-width:320px) {background: #FFFFFF;}
"and" 用于连接多个媒体条件: screen and (min-width:320px) and (orientation:landscape)
-
媒体查询中的断点设置
断点是指页面布局发生改变的临界点。在移动页面设置中，断点的设置很重要。
一种方式是按照设备尺寸设置，另一种方式是按照页面内容尺寸设置。
第1种：根据设备尺寸设置。这种方式基本都是针对某种或某一类设备的，因此断点值比较固定，除非有特殊的新设备出现。
- 根据设备宽度设置
@media screen and (max-width:320px) {// 针对iPhone4/4s/5/5c/5s的样式设置 } - 根据设备方向设置
@media screen and (orientation:portrait) {// 设备竖屏时的样式设置 }
@media screen and (orientation:landscape) {// 设备横屏时的样式设置 } - 根据设备像素比设置
@media screen and (device-pixel-ratio:2) {// 设备像素比为2的设备样式设置 }
这种方法的有点是可以针对某种尺寸的机型进行特殊的处理，因此在细节上处理的更好。这种方法也有缺点，就是灵活性差，当有新尺寸的设备出现时，需要额外的适配。
第2种：根据页面内容尺寸设置。这种方式其实在移动开发中很少使用，主要用在PC页面适配中。
在实际项目中，一般都会将两种方法配合起来使用，在较宽屏幕的设备中根据内容尺寸设置断点，而在小屏幕设备中根据设备尺寸设置断点。
关于断点设置的详细内容可以参考CSS3 Media Queries
-
百分比布局
百分比布局非常适合移动端页面的布局，能够很好的解决设备尺寸碎片化的情况，兼容性也非常好，而且元素的占比计算不会太复杂。
在百分比布局中，最好熟练的应用 margin 和 padding 。
CSS规范中说明margin和padding的百分比值是以其自身父元素的宽度为基础进行计算的。为什么？因为CSS是默认横向排版的，而且通常情况下横向的宽度会是一定的，而纵向的高度是可以无限延伸的。
-
缩放法
如果希望页面在不同分辨率下显示比例不变，可以用到JavaScript缩放法。思路是：直接按640像素重构设计稿，通过计算浏览器的实际宽度和页面宽度(640px)之间的比例，对页面进行缩放。
缩放的方式有Zoom和Transfrom的Scale两种。 我们选择Zoom缩放法，是因为Zoom缩放后容器所占据的空间也跟着一起缩放；虽然Zoom以前是IE的私有属性，但是现在也能很好的被其他浏览器支持了；还有就是Zoom缩放后渲染的清晰度会好一些。
使用这种方法的好处是，可以按照设计稿的尺寸来进行页面开发，缺点是高度会随着宽度进行等比缩放，所以滑屏布局用缩放来做自适应并不是很有利。
-
Rem自适应
Rem是CSS3里的一种尺寸单位，根据页面<html>标签字号匹配大小。
还可以用来作为整个页面的基础尺寸：如果整个页面的容器元素尺寸都是以rem为单位，我们只需要根据当前浏览器分辨率动态的设置根目录的字号尺寸，页面就可以自动去适应分辨率了。 例如<html>标签的字号为font-size: 以20像素为例，把一个<div>标签设置为width: 10rem，那么这个<div>标签则以200像素的宽度显示。
// 以JavaScript来控制根目录字号
(function(){
var html = document.documentElement;
function setFont() {
var cliWidth = html.clientWidth;
html.style.fontSize = '20px';
}
setFont();
})()
关于Rem的详细内容可以参考CSS3的REM设置字体大小
-
模块和内容的适应
- 对于模块
可以通过变化元素位置达到减少列数的目的（例如：大屏幕显示3列，小屏幕显示两列），
也可以通过隐藏或展开的方式对模块进行改变（例如：导航和侧边栏等模块，在小屏幕上像“抽屉”一样隐藏起来），
可以对模块的尺寸进行放大或缩小（例如：轮播广告，图片和视频等），
还可以考虑增加或者删除模块的数量（例如：移动端不需要PC的下载功能） - 对于模块中的内容
可以考虑挤压或拉伸内容容器的形状，
可以在内容排版上选择换行或者平铺（或垂直排列）来兼容小屏幕设备，
也可以对内容进行增加或删减
示例：http://tgideas.qq.com/book/danceonfingers/chapter1/section1/summary-piclist.shtml
-
视频与iFrame的自适应
布局中最头疼的除了图片外，就是视频和iFrame了，如果不给它们一个固定的尺寸就不能正常显示，所以可以使用百分比的方式，它们的自适应会变得很简单。（目前视频的尺寸比例大多数为4:3/16:9/16:10，所以不知道真实的尺寸也可以计算）
-
水平垂直居中
直接看示例：http://tgideas.qq.com/book/danceonfingers/chapter1/section1/tips-center-middle.shtml
1.2 页面调试
1.3 常用库和框架
1.3.1 jQuery Mobile
这里默认使用的是1.4版本的。
其完整兼容性测试列表，请参考JQuery Mobile的支持情况
关于 页面框架/页面模块，参考如下示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<title>jQuery-test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" type="text/css" media="screen" />
</head>
<body>
<div data-role="page">
<!-- 如果前一个页面没有header，那下一个界面的true是不会生效的，坑，样式也坑 -->
<div data-role="header" class="jQueryMobile-header"></div>
<div data-role="navbar" data-iconpos="left"><!-- data-iconpos 设置图标在文字的方位 -->
<ul>
<li><a href="#" data-icon="grid" class="ui-btn-active">腾讯游戏</a></li>
<li><a href="#" data-icon="star">TGideas</a></li>
<li><a href="#" data-icon="gear">Tencent</a></li>
</ul>
</div>
<ul data-role="content">
<li><a href="#pageTgideas">About TGideas</a></li>
<li><a href="#pageTencent">About Tencent</a></li>
</ul>
</div>
<div data-role="page" id="pageTgideas" >
<div data-role="header" class="jQueryMobile-header" data-add-back-btn="true" data-add-btn-text="back"></div>
<p data-role="content">TGideas隶属于xxx</p>
</div>
<div data-role="page" id="pageTencent" >
<!-- 网格布局 -->
<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-a">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a">Block B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-a">Block C</div></div>
</div>
<div class="ui-grid-c">
<div class="ui-block-a"><div class="ui-bar ui-bar-a">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a">Block B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-a">Block C</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-a">Block D</div></div>
</div>
<div class="ui-grid-d">
<div class="ui-block-a"><div class="ui-bar ui-bar-b">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a">Block B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-a">Block C</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-a">Block D</div></div>
<div class="ui-block-e"><div class="ui-bar ui-bar-a">Block E</div></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>
-
jQuery Mobile中的UI组件
<按钮>、<表单元素>、<列表>，p49-52
-
jQuery Mobile中的事件
<触屏事件>、<翻转事件>、<页面显示或隐藏事件>，p53-54
1.3.2 Zepto
Zepto是一个轻量级的、针对现代高级浏览器的JavaScript库。详见P55-P68
1.3.3 Cocos2d
是一款游戏引擎，可以了解一下，P69-P78
1.3.4 CreateJs
参考P79-P86
