响应式网页设计能让手机、平板电脑等均能获得完美的浏览体验，能够兼顾多屏幕、多场景的灵活设计，这与一次编写，到处运行有异曲同工的作用。

移动端设备的使用率虽然越来越高，但是计算机端用户也还有不少，基于这点，开发者在搭建网站时，需要兼顾计算机端和移动端用户，早期960px可以，现在这样做的话，使用移动设备的用户看到的是一个按照比例缩小的屏幕，他们只能通过放大缩小和左右滚动才能完全浏览页面，很不方便，因此此响应式设计显得很重要。

响应式网页设计

响应式网页设计采用css的媒体查询技术，将三种已有的开发技巧，包括弹性网格布局，弹性图片。媒体和媒体查询整合在一起，就是响应式网页设计。

网页采用流体+断点模式，配合流体布局和可以自适应的图片视频等资源素材，在遇到断点改变页面样式之前，页面是会随着窗口大小自动缩放的。

在进行响应式网页设计时，应该遵循以下原则

简洁的菜单方便用户迅速找到所需功能

选择系统的文字和响应式图片设计，让网页尽快加载。

清晰简短的表单项，便捷的自动填写功能，方便用户填写提交。

相对单位让网页能够在各种视口规格任意转换。

多种行为召唤组件，避免弹出窗口

视口 Viewport

视口和屏幕尺寸不是一个概念。

视口指的是浏览器窗口内的内容区域，也就是网页实际显示的区域，这个区域的尺寸通常与实际渲染出的网页尺寸不同，若网页尺寸大于视口，浏览器会显示滚动条供用户拖动查看。

以往的设计中，习惯针对某些设备，比如手机、台式机、平板电脑的数据设计断点。

1024台式机 768px 平板电脑 480px 手机

但是实际是哪个远远不止如此。

响应式设计不是针对某一特定宽度，一种分辨率对应一种设备，而是需要确定一个区间值，设计师需要寻找一个临界点---就是视觉效果开始不符合人们的审美或影响了内容获取时对应的值，这个临界点才是响应式设计中的断点。

htm5提供了一种方法供开发者自由控制视口的属性。

在进行响应式网页开发时，总会考虑显示设备和高的问题，假设现在有两个屏幕，屏幕分辨率不一样，为了这两个屏幕都能获得良好的浏览体验，开发者可以对这两类分辨率进行视频.早期各大产商ppi差不多，所有直接参考屏幕分辨率来适应不同的屏幕类型没有什么太大的问题

但是现在智能手机主流屏幕代销虽然不大，但分辨率很高，这样直接放大手机上阅读，界面就好显得非常小，阅读体验差。在设计响应式网页时，还按照屏幕分辨率来进行适配就不太合适了。因此需要一种将原始视图在手机上放大的机制，通过控制视口实现就能很好的解决问题，一般移动设备屏幕的可视尺寸比传统台式计算机小的多，可以通过设置一个比较小的视口将尺寸较小的网页放大到整个屏幕，这样开发时就只需要关注视口的大小而不是屏幕的分辨率。

视口可以通过一个名称为viewport的元标签meta来进行控制，基本规则如下

<meta name="viewport" content="width=device-width',initial-sacle=1">

width:控制viewport的大小，可以指定一个值，或者特殊的值，如device-width为设备的宽度（单位为缩放为100%的css的像素）不同设备的device-width值会有不同

height 和width相对应，指定高度

initial-scale 初始缩放比例

maximum-scale 允许用户缩放到的最大比例，范围0-10

minimum -scale 允许用户缩放到的最小比列，范围0-10

user-scalable 用户是否可以缩放 yes--允许用户缩放 no--不允许用户缩放

响应式布局

布局类型

布局类型主要分为通栏等分非等分

布局实现

基于页面的实习单位可分为4中类型固定布局可切换的固定布局弹性布局混合布局

固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度是多少，只设计一套尺寸

可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过设定的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局。

弹性布局：以百分比作为页面的基本单位，可以使用一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。

混合布局：通弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；采用混合像素和百分比两种单位作为页面单位.

可切换的固定布局、弹性布局、混合布局都是目前可采用的响应式布局方式。

可切换的固定布局实现成本最低，拓展性比价差

弹性布局、混合布局具有响应性，是比较理想的响应式布局实现方式。

通栏、等分结构采用弹性布局方式

非等分的多栏结构采用混合布局、

不同类型的页面牌面局部，需要采用不同的方式实现

布局响应

对页面进行响应式的设计实现，需要对相同内容进行butt宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）移动优先(从移动端向上设计)

无论基于哪种模式的设计，均要兼容所有设备，布局响应时不可避免的需要对模块布局做一些变化。需要通过js获取设备的屏幕宽度来改变网页的布局，这一过程称为布局响应屏幕。

常见的有几种方式

布局不变----页面中整体模块布局不发生变化，这里也有三种

布局改变--页面中的整体模块布局发生变化。随着屏幕尺寸发生变化，整个页面布局也会发生改变，以显示更多内容，这也分为三种情况。

单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能保持简单轻巧，而在同一断点内（发生布局改变的临界点称之为断点）保持同一逻辑。否则页面实现太复杂，也会影响整体体验和页面性能。

媒体查询

css3引入了媒体查询，媒体查询增强了媒体类型方法，允许根据特定的设备特性应用样式，可以让网站呈现的样式使用不同的屏幕尺寸。注意媒体类型区分大小写，以下是常见的媒体介质类型。

all 全部媒体类型（默认值）

print 打印或打印预览

screen 彩色计算机屏幕

speech 屏幕阅读器

早期的媒体介质不止这4种，但现在其他基本都被废弃了。

媒体查询打破了独立样式表，通过一些条件询问语句来确定目标样式，从而控制同一个页面在不同尺寸的设备浏览器中呈现出与之适配的样式，使浏览器在不同的设备下都能得到最佳的体验。

媒体查询语法

1.媒体查询的一般结构

媒体查询以@media 开头，利用and/not/only这些逻辑关键字把媒介类型和条件表达式串联起来形成布尔表达式，判断是否满足当前浏览器的运行环境。如果满足，则上面的styles部分的样式就会起作用，进而改变页面元素的样式，否则，页面效果不产生任何变化

@media mediatype and/not/only (media ferture){

css-code

}

and 将多个媒体属性连接成一条媒体查询，只有当每个属性都为真时，结果才为真

not 用来对一条媒体查询结果取反

only 仅在媒体查询匹配成功的情况下被应用于一个样式

逗号分隔列表

使用逗号，等同于or逻辑操作父。当任何一个媒体查询返回真，样式就是有效的。

逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其他的媒体查询，这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

2.环境参数

媒体类型只能识别显示设备的类型，还需要针对运行设备监测环境参数。

下面列举一些常用的参数

max-width:定义输出设备中的页面最大可见区域宽度

min-width:定义输出设备中的页面最小可见区域宽度

orientation 设备的方向，portrait和landscape 分别表示竖直和水平

resolution 设备的分辨率，以dpi或者dpcm表示。

3.条件表达式

条件表达式用来判断设备环境参数，从而确定相应的显示方法。

eg:@media screen and (max-width: 960px) {body { background-color: red; }}

常用引用方式

作为css的meida属性，其引用方式分为内嵌方式和外联方式

内嵌方式

内联方式是将媒体查询的样式和通用样式写在一起，例如要在宽度超过320px的情况下为链接加上下滑线

媒体查询需要声明在普通样式后面，否则声明将不会起作用

a{text-decoration:none}

@media screen and (min-width:320px){

a {text-decoration:underline}

}

外联方式

css属性外联方式使用link标记，带有媒体查询的外联方式也不例外。