标签：
响应式网页可以根据浏览设备的不同而灵活的改变尺寸。省去了重新编写网页的麻烦。
1.响应式页面的组成：
（1）灵活的图像和媒体。
（2）灵活的、基于网格的布局，也就是流式布局。
（3）媒体查询。
2.创建可伸缩图像：
对任何想做成可伸缩图像的图像，在HTML的img标签中省略width和height属性，在样式表中，为每个想做成可伸缩图像应用：max-width:100%。还可以使用video、embed、object{max-width:100%；}让HTML5视频及其他媒体变成可伸缩。
3.创建弹性布局需要使用百分数宽度，计算百分数宽度的方法：要指定的宽度（以像素为单位）/容器宽度（以像素为单位）=值
4.创建弹性布局的步骤：对于需要某个宽度实现预期布局的元素设置：width:percentage;其中percentage表示你希望元素在水平方向上占据容器空间的比例。
5.有两种方法针对特定的媒体类型定位CSS：
（1）使用link元素的media属性，位于head内。
（2）在样式表中使用@media规则。
媒体查询增强了媒体类型的方法，允许根据特定的设备特性定位样式。方法有两种：
（1）指向外部样式表的链接：
<link rel=”stylesheet”
media=”logictype and (feature:value)”
href=”your-stylesheet.css” />
（2）位于样式表中的媒体查询：
@media logic type and (feature:vlaue){/*目标CSS样式规则写在这里*/}
logic部分是可选的，其值可以是only或not。only关键字可以确保旧的浏览器不读取余下的媒体查询，同时一并忽略链接的样式表。not关键字可以对媒体查询的结果求反。例如：使用media=”not screen”会在使用screen以外的任何类型时加载样式表。type部分是媒体类型，如screen、print等。feature:value 是可选的，但一旦包含它们，它们必须用括号包围且前面要有and这个字。
6.了解了可伸缩图像、弹性布局和媒体查询的知识之后，就可以将它们组合在一起，创建响应式网页。
（1）创建内容和HTML：
（2）在HTML页面的head元素中，输入<meta name=”viewport” content=”width=device-width” />或<meta name=”viewport” content=”width=device-width,initial-scale=1” />
（3）创建适用于所有设备的基准样式，参考移动优先方法：首先为所有的设备提供基准样式，基准样式包括基本的文本样式，内边距、外框、外边距和背景，以及设置可伸缩图像的样式。然后使用媒体查询逐渐为更大的屏幕定义样式。
（4）识别出适合你的 内容样式的所有断点。断点是需要修改的地方。
（5）选择希望的浏览器的显示方式（考虑兼容性等）
（6）开始测试。
7.兼容旧版IE：
（1）什么都不做让网站显示基本的版本。
（2）为它们单独创建一个样式表，让他们显示网站最宽的版本。
（3）如果希望页面有响应式的效果就在页面中引入respond.min.js。
标签：
原文地址：http://www.cnblogs.com/koto/p/5011678.html
