移动web自适应--响应式设计
简介：
响应式网页由伊桑.马科特提出，他在A list Apart发表了一篇开创性的文章，将三种已有的开发技巧整合起来，并名为响应式网页设计。响应式网页（英语：Responsive web design，通常缩写为RWD），又称为自适应网页设计、回应式网页设计。 是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。
理念：
响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。响应式的设计应该秉承「内容优先，移动优先」的设计原则。想要实现响应式设计，要注意以下：
媒体查询：
1、阻止浏览器缩放页面
在使用智能手机浏览PC端网站时，一般会自动缩放到合适的宽度使视口能够显示整个页面，但是这样会使文字变得很小，浏览内容不方便。可以通过设置meta标签的viewport属性，设定加载网页时以原始的比例显示网页，将这个meta标签加到head标签里。下面是将页面放大设备实际尺寸两倍显示的meta标签的示例：
<meta name=”viewport” content=”width=device-width,initial-scale=2.0″ />
当按住屏幕2点向外拉伸可放大2倍时效果。
其中initial-scale=2.0的意思是将页面初始的缩放比例放大2倍，width=device-width的意思是浏览页面的宽度应该等于设备宽度。还可以通过user-scalacle=”no”设置禁止手动缩放，height=height-viewport浏览页面的高度应该等于设备高度，minimum-scale允许用户缩放到的最小比例，maximum-scale允许用户缩放到的最大比例。下面是我最终使用的meta标签：
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1″ />
当按住屏幕2点向外拉伸可放大1倍时效果。
2、媒体查询
实现响应式设计的关键技术是CSS3的媒体查询模块，可以根据设备显示器的特性为其设定CSS样式。创建媒体查询时，较常用的是设备的视口检测，如：width视口宽度、height视口高度、device-width渲染表面的宽度（设备的宽度）、device-height渲染表面的高度（设备的高度），还有更多的媒体查询检测特征，这里不就一一列举，如果想查看请点击我，除了scan、grid之外，都可以使用min、max前缀来创建一个查询，所以可以这样创建一段代码：
<link rel=”stylesheet” type=”text/css” media=”screen and (min-width: 200px) and (max-device-width: 360px)” href=”smallScreen.css” />
@import url(“phone.css”) screen and (min-width: 200px) and (max-width :360px);
以上2段代码，使其在视口在200像素和360像素之间才会引用的代码。
该图显示为使用link标签引用
该图显示使用@import时引用
虽然不匹配的文件会被自动忽略，但是不确定文件不被下载，因此，将可能造成页面渲染的HTTP请求，从而导致访问速度变慢，所以建议使用在CSS样式表中使用媒体查询，如下：
@media screen and (max-width: 320px) {
/* 设备宽度小于320px */
}
@media screen and (min-width: 320px) and (max-width: 480px) {
/* 设备宽度小于480px大于320px */
}
@media screen and (min-width: 480px) and (max-width: 640px) {
/* 设备宽度小于640px大于480px */
}
@media screen and (min-width: 640px) and (max-width: 768px) {
/* 设备宽度小于768px大于640px */
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
/* 设备宽度小于1280px大于768px */
}
@media screen and (min-width: 1280px) {
/* 设备宽度大于1280px */
}
以上的代码区分了几个比较常见的视口宽度下显示样式，这个可以根据自己项目需求做适当的修改。
3、百分比布局（流体式布局）
媒体查询有其优越性，但也存在一定的局限性。那些仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS媒体查询规则突变到另一组，两者之间没有任何平滑渐变。为了实现更灵活的设计，能在所有视口中完美显示需要使用灵活的百分比布局，这样才能让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。Ethan Marcotte提供了一个简易可行的公式口即：
目标元素宽度÷上下文元素宽度=百分比宽度
只要明确了上下文元素，就可以很方便地将固定像素宽度转换对应的百分比宽度，实现百分比布局。假设上下文宽度为200px，如果想设置目标的宽度是20px，可以这样设置：
.box {
width: 200px;
height: 50px;
border: 1px solid #f00;
}
.pox {
width: 10%;
height: 50px;
background: #0f0;
}<div class=”box”>
<div class=”pox”></div>
</div>
该图显示了pox的实际宽度为20px
4、字号
网页中指定固定像素的字体大小是经常使用的文字大小单位是 px(Pixels)，但如果你想字体大小更具弹性的话，最好还是使用相对大小，CSS中比较常用的指定字体相对大小的单位有百分比，em以及CSS3新增的rem。
之前在网页设计中使用em代替px主要是为了文字缩放，因为老版本的IE无法缩放px单位的文字，实际上em是相对其上下文的字体大小而确定的，同样可以使用“目标元素宽度÷上下文元素宽度=百分比宽度”这个公式转换为相对单位。唯一值得欣慰的是，现代浏览器的默认字号都是16px，也就是body的默认font-size为16px，假设设置html的font-size为10px，可以这样设置：
body{ font-size : .625em; } /* 10/16=0.625 */（小数点前面的0可以省略）
由于chrome不支持小于12px的字体，可以在FFbug中查看设置后的字号实际大小。
chrome查看如上
ff bug查看如上
这样定义了body的默认字号为10px，当想设置h1的字体为32px的时候，可以这样设置了：
h1 { font-size : 3.2em; }
使用了em做为字体单位，可以很方便的全局修改字体大小，只要修改了body的fonn-size大小即可。这样在配合媒体查询可以在不同视口下显示不同的字体大小，em唯一不够完美的是基于父元素的字体大小，加入有很深的结构可能计算起来会很麻烦，but，css3的rem拯救了我们，再也不用担心父级元素的字体大小了，因为它始终是基于根元素的。通常在标题，正文等大面积文字的位置可以使用 rem。但是在一些特殊的设计场景，rem 可能会导致布局错位。
5、图片
网页上除了文字就是图片，实现图片的流动布局非常简单，如下：
img { width : 100%;}
这样就可以使用图片自动缩放与其容器100%匹配。
工具：
推荐使用chrome浏览器模拟，既有手势，还有 mouse touch事件，同事也可以附加一个chrome插件《resize window 》
