响应性web设计的理念是：页面的设计与开发应当根据用户行为与设备环境(包括系统平台，屏幕尺寸，屏幕定向等)进行相应的响应及调整。具体的实践方式由多方面组成，包括弹性网格和布局，图片，css Media(媒体查询)使用等。
一：布局方式有如下几种：
1. 固定布局：固定布局以PX(像素)作为单位的，在PC端，设计稿多少PX就写多少PX，前几年都是这种布局，常见的是以960px或者1000px来设计的，但是这样设计有如下缺点：
1.页面很死板，在更大的屏幕上，页面左右2边留白。
2. 不适应响应性布局。
2. 流式布局：流式布局是以百分比作为单位的，我们要牢记如下公式：
百分比宽度 = 目标元素宽度 / 上下文元素宽度
这种布局优点：可以自适应布局，根据不同的分辨率显示不同的宽度。
缺点：在行高或者marginTop在大屏幕下看起来太高，在小屏幕下看起来太窄。
3 弹性布局：弹性布局是以em作为单位的，同样弹性布局也支持如下公式：
百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸
使用em将文字像素px转换为相对单位，现在浏览器默认文字的大小是16px，如果一个文字大小是48px，上下文元素是(浏览器)，那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1标签内部span标签font-size 是24px,那么h1标签的font-size = 48 / 16 = 3em h1 span {font-size = 24/48 =0.5em}.弹性布局也支持响应性web设计。
二： 媒体查询：
根据特定的环境查询各种属性值，比如设备的宽度，是否横向使用不同的css样式来渲染。
媒体查询使用如下：比如内联样式可以如下写：
1. 最大宽度960px一种布局：
@media screen and (max-width:960px) {}
2. 最小宽度600px 另一种布局：
@media screen and (min-width:600px) {}
3. 宽度在600px 到 960px之间，如下:
@media screen (min-width:600px) and (max-width:960px) {}
外联样式使用link标签来引用样式：
|
1 2 3 |
<link rel=”stylesheet” href=”xx1.css” media=”screen and (max-width:960px)”/> <link rel=”stylesheet” href=”xx1.css” media=”screen and (min-width:600px)”/> <link rel=”stylesheet” href=”xx1.css” media=”screen and (min-width:600px) and (max-width):960px”/> |
如果对于像ipad来说，我们可以在上面增加一个属性 orientation(landscape或portrait) 横屏或者竖屏。
理解meta各个属性的含义：
做h5页面移动端开发需要在head标签内引入下面这句话。（如果没有引入的话，页面的字体等大小就不正常了）。
<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no” />
具体含义如下：
- Width: 控制viewport的大小。如device-width为设备的宽度。
- Height: 和width相对应，指定高度。
- initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。
- maximum-scale 允许用户缩放到的最大比例，范围从0到10.0
- minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0
- user-scalable： 用户是否可以手动缩放，值可以是:
1， yes,true允许用户缩放；
2, no、false不允许用户缩放。 (只设置这一个属性，有的浏览器并不生效，我们需要配合maxinum-scale和mininum-scale最大缩放 与最小缩放分别为1:1)。
想深入理解meta及viewport各个属性，可以看 “无双” 下面这篇博客讲的非常详细。如下：
http://www.cnblogs.com/2050/p/3877280.html#3075885
综合：流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。
但是针对响应性web布局使用媒体查询也有缺点的,缺点如下：
对于设计师：要针对不同的屏幕大小设计不同的设计，（例如宽屏下的三栏设计、普通屏幕下的两栏设计以及移动设备上的单栏设计等）。对于前端对于不同的屏幕要写不同的样式，增加了工作量，同时维护起来不是很方便(要维护几份不同的css)。
三：图片
1. 对于背景图片来说，css3有个属性 background-size可以等比例缩放缩放背景图片。
但是对于小屏幕的移动设备去加载大背景图片的话，有缺点的，最主要的缺点是要更大的带宽，浪费流量。所以我们要想做的更好的话，可以使用媒体查询根据设备的宽度来 渲染不同大小的背景图片。
2. 对于页面上的<img/>标签图片的话：
1. 如果只是页面上静态图片的话，不考虑带宽的情况下，可以使用width=”100%”等比例缩放，如：<img src=”XX.png” width=”100%”/>
2. 如果是商品图或者页面上有多个的话，考虑不浪费不必要的带宽，需要后台根据不同的设备宽度大小来返回不同的json数据的图片来给我们前端，之后我们前端使用JS动态的渲染出来。
在现代浏览器中（包括IE7+）中要实现图片随着流动布局相应缩放非常简单，只需要在css中加上这么一句代码：
|
1 2 3 |
img { max-width:100%; } |
含义是：确保图片的最大宽度不会超过浏览器的窗口或其容器可视部分的宽度，所以当窗口或容器的可视部分变窄时，图片的最大宽度值也会相应的变小，图片本身永远不会覆盖容器。
四：理解css单位px，em，rem的区别：
1. Px是css中最基本的长度单位，在PC端，设计稿多少像素，页面css就写多少像素。
2. em 是相对单位，相对于上下文元素而言，一般情况下，浏览器默认的字体大小是16px，也就是1em等于16px；比如：
如果一个文字大小是48px，上下文元素是(浏览器)，那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1 标签内部span标签font-size 是 24px,那么h1标签的font-size = 48 / 16 = 3em h1 span {font-size = 24/48 = 0.5em}.
3. rem也是相对单位。rem是相对于html根元素来计算的，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同 em，默认1rem=16px; 同理你可以 设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。
比如设置html根元素 如下代码：
|
1 |
html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/} |
当一个p元素是24px的话，那么转换成rem为单位的话，那么只需要如下这样写即可：
|
1 |
P {font-size: 2.4rem; /*2.4 × 10px = 24px */ } |
五：元素未知宽度居中。
我们先来介绍一下未知宽度，元素居中的方法，对于响应性web设计是有帮助的，我们可以来了解下。
第一种方法：
假如页面html结构如下：
|
1 |
<div><p>What is CSS?</p></div> |
只需要给父级元素div 设置 文本对齐是 居中对齐。子元素设定display:inline-block即可。如下代码：
|
1 2 |
div{text-align:center} p{display:inline-block} |
第二种方法如下：
|
1 2 |
div{position:relative; left:50%; float:left;} p{position:relative; left:-50%;} |
六：媒体查询标准写法：
|
1 2 3 |
@media 设备类型 and (设备特性) { // css 样式 } |
在css2.1中定义了10种设备类型，分别如下：
| 可以指定的值 | 含义 |
| all | 所有设备 |
| screen | 电脑显示器 |
| 打印用纸或打印预览视图 | |
| handled | 便携设备 |
| tv | 电视机类型的设备 |
| speech | 语音和音频合成器 |
| braille | 盲人用点字法触觉回馈设备 |
| embossed | 盲人打印机 |
| projection | 各种投影设备 |
| tty | 使用固定密度字母栅格的媒介，比如电传打字机和终端 |
Css设备特性共有13种，是一个类似于CSS属性的集合。但与CSS属性不同的是，大部分设备特性的指定值接受min/max的前缀，用来表示大于等于或小于等于的逻辑，以此避免使用<和>这些字符。
设备特性如下表：
| 特性 | 可指定的值 | 是否允许使用min/max前缀 | 特性说明 | ||||||||||||||||||||||||||||||||||||||||||||
| width | 带单位的长度数值 | 允许 | 浏览器窗口的宽度 | ||||||||||||||||||||||||||||||||||||||||||||
| height | 带单位的长度数值 | 允许 | 浏览器窗口的高度 | ||||||||||||||||||||||||||||||||||||||||||||
| device-width | 带单位的长度数值 | 允许 | 设备屏幕分辨率的宽度值 | ||||||||||||||||||||||||||||||||||||||||||||
| device-height | 带单位的长度数值 | 允许 | 设备屏幕分辨率的高度值 | ||||||||||||||||||||||||||||||||||||||||||||
| orientation | 只能指定两个值:portrait或landscape | 不允许 | 窗口的方向是纵向还是横向， | ||||||||||||||||||||||||||||||||||||||||||||
| aspect-ratio | 比例值，例如：16/9 | 允许 | 窗口的纵横比，比例值为浏览器窗口的宽度值/高度值 | ||||||||||||||||||||||||||||||||||||||||||||
| device-aspect-ratio | 比例值，例如：16/9 | 允许 | 设备屏幕分辨率的纵横比，比例值为设备屏幕分辨率的宽度值/高度值 | ||||||||||||||||||||||||||||||||||||||||||||
| color | 整数值 | 允许 | 设备使用多少位的颜色值，如果不是彩色设备，该值为0 | ||||||||||||||||||||||||||||||||||||||||||||
| color-index | 整数值 | 允许 | 色彩表中的色彩数 | ||||||||||||||||||||||||||||||||||||||||||||
| monochrome | 整数值 | 允许 | 单色帧缓冲器中每像素的字节数 | ||||||||||||||||||||||||||||||||||||||||||||
| resolution | 分辨率值，譬如300dpi | 允许 | 整数值 | 允许 | 色彩表中的色彩数 | ||||||||||||||||||||||||||||||||||||||||||
| monochrome | 整数值 | 允许 | 单色帧缓冲器中每像素的字节数 | ||||||||||||||||||||||||||||||||||||||||||||
| resolution | 分辨率值，譬如300dpi | 允许 |
1. 固定布局：固定布局以PX(像素)作为单位的，在PC端，设计稿多少PX就写多少PX，前几年都是这种布局，常见的是以960px或者1000px来设计的，但是这样设计有如下缺点： 1.页面很死板，在更大的屏幕上，页面左右2边留白。 2. 不适应响应性布局。 2. 流式布局：流式布局是以百分比作为单位的，我们要牢记如下公式： 百分比宽度 = 目标元素宽度 / 上下文元素宽度 这种布局优点：可以自适应布局，根据不同的分辨率显示不同的宽度。 缺点：在行高或者marginTop在大屏幕下看起来太高，在小屏幕下看起来太窄。 3 弹性布局：弹性布局是以em作为单位的，同样弹性布局也支持如下公式： 百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸 使用em将文字像素px转换为相对单位，现在浏览器默认文字的大小是16px，如果一个文字大小是48px，上下文元素是(浏览器)，那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1标签内部span标签font-size 是24px,那么h1标签的font-size = 48 / 16 = 3em h1 span {font-size = 24/48 =0.5em}.弹性布局也支持响应性web设计。 二： 媒体查询： 根据特定的环境查询各种属性值，比如设备的宽度，是否横向使用不同的css样式来渲染。 媒体查询使用如下：比如内联样式可以如下写： 1. 最大宽度960px一种布局： @media screen and (max-width:960px) {} 2. 最小宽度600px 另一种布局： @media screen and (min-width:600px) {} 3. 宽度在600px 到 960px之间，如下: @media screen (min-width:600px) and (max-width:960px) {} 外联样式使用link标签来引用样式：
如果对于像ipad来说，我们可以在上面增加一个属性 orientation(landscape或portrait) 横屏或者竖屏。 理解meta各个属性的含义： 做h5页面移动端开发需要在head标签内引入下面这句话。（如果没有引入的话，页面的字体等大小就不正常了）。 <meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no” /> 具体含义如下：
1， yes,true允许用户缩放； 2, no、false不允许用户缩放。 (只设置这一个属性，有的浏览器并不生效，我们需要配合maxinum-scale和mininum-scale最大缩放 与最小缩放分别为1:1)。 想深入理解meta及viewport各个属性，可以看 “无双” 下面这篇博客讲的非常详细。如下： http://www.cnblogs.com/2050/p/3877280.html#3075885 综合：流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。 但是针对响应性web布局使用媒体查询也有缺点的,缺点如下： 对于设计师：要针对不同的屏幕大小设计不同的设计，（例如宽屏下的三栏设计、普通屏幕下的两栏设计以及移动设备上的单栏设计等）。对于前端对于不同的屏幕要写不同的样式，增加了工作量，同时维护起来不是很方便(要维护几份不同的css)。 三：图片 1. 对于背景图片来说，css3有个属性 background-size可以等比例缩放缩放背景图片。 但是对于小屏幕的移动设备去加载大背景图片的话，有缺点的，最主要的缺点是要更大的带宽，浪费流量。所以我们要想做的更好的话，可以使用媒体查询根据设备的宽度来 渲染不同大小的背景图片。 2. 对于页面上的<img/>标签图片的话： 1. 如果只是页面上静态图片的话，不考虑带宽的情况下，可以使用width=”100%”等比例缩放，如：<img src=”XX.png” width=”100%”/> 2. 如果是商品图或者页面上有多个的话，考虑不浪费不必要的带宽，需要后台根据不同的设备宽度大小来返回不同的json数据的图片来给我们前端，之后我们前端使用JS动态的渲染出来。 在现代浏览器中（包括IE7+）中要实现图片随着流动布局相应缩放非常简单，只需要在css中加上这么一句代码：
含义是：确保图片的最大宽度不会超过浏览器的窗口或其容器可视部分的宽度，所以当窗口或容器的可视部分变窄时，图片的最大宽度值也会相应的变小，图片本身永远不会覆盖容器。 四：理解css单位px，em，rem的区别： 1. Px是css中最基本的长度单位，在PC端，设计稿多少像素，页面css就写多少像素。 2. em 是相对单位，相对于上下文元素而言，一般情况下，浏览器默认的字体大小是16px，也就是1em等于16px；比如： 如果一个文字大小是48px，上下文元素是(浏览器)，那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1 标签内部span标签font-size 是 24px,那么h1标签的font-size = 48 / 16 = 3em h1 span {font-size = 24/48 = 0.5em}. 3. rem也是相对单位。rem是相对于html根元素来计算的，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同 em，默认1rem=16px; 同理你可以 设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。 比如设置html根元素 如下代码：
当一个p元素是24px的话，那么转换成rem为单位的话，那么只需要如下这样写即可：
五：元素未知宽度居中。 我们先来介绍一下未知宽度，元素居中的方法，对于响应性web设计是有帮助的，我们可以来了解下。 第一种方法： 假如页面html结构如下：
只需要给父级元素div 设置 文本对齐是 居中对齐。子元素设定display:inline-block即可。如下代码：
第二种方法如下：
六：媒体查询标准写法：
在css2.1中定义了10种设备类型，分别如下：
Css设备特性共有13种，是一个类似于CSS属性的集合。但与CSS属性不同的是，大部分设备特性的指定值接受min/max的前缀，用来表示大于等于或小于等于的逻辑，以此避免使用<和>这些字符。 设备特性如下表：
|
