响应式网页设计

什么是响应式网页设计？

响应式网页设计（RWD）就是网页内容会随着访问他的视口及设备的不同而呈现不同的样式
响应式Web设计是Ethan Marcotte发明的，他曾在A List Apart上发表了篇响应式Web设计的文章

为何需要响应式网页设计?

全球屏幕分辨率统计近12个月

从此图表可以看出other、1366x768（电脑）以及360x640（手机）的屏幕分辨率占比较大，但除此之外，还有许多其余屏幕分辨率的设备。因此在网页内容设计的开始上不能够只按照某种分辨率进行固定设计，否则在更大或者更小分辨率的设备上，内容会重新编排，或者根据情况隐藏部分内容。
越来越多的智能移动设备加入到互联网中来，响应式web设计（ RWD ）的出现，目的是为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大的不同分辨率的屏幕。
响应式web的弹性设计使不同用户端的用户习惯舒服的浏览页面，获得良好的用户体验。

响应式web设计例子

在进行web设计时我们的代码会有类似电话这样的数字，有的手机上它会自动转换成可以拨打电话
在手机上打开页面，页面也许将那一串数字标记为电话，误导网友们对这串数字进行错误的认识
因此为了解决数字自动转换成可拨打电话的问题，可以在网页中添加下面这行代码：

这样有的手机就不会对类似电话这样数字进行自动转换成可拨打电话，也不会误导网友。

RWD的三项组成科技

弹性网格布局

不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式，不断被研发着的各种新设备也将带来新的屏幕尺寸规格。用户还可以通过转动设备来任意切换屏幕的定向方式。因此网页的网格布局需要弹性化。
为了让网页在不同设备上体现良好的网页布局效果，可以在网页的<head>中添加这行代码：<meta name="viewport" content="width=device-width">
这里的<meta>标签可以告诉浏览器怎么渲染网页。

弹性图片

在处理图片问题上，通常使用max-width规则，即保证所有图片最大限时为其自身的100%（最大值可以显示为自身那么大）。
当然也可以使用width属性，例如width：100%，但图片只会按照该值显示，而不考虑自身固有宽度，会导致塔显示得和视口一样宽。

媒体查询

媒体查询即最小宽度媒体查询。

在CSS中，最小宽度媒体查询是这样写的：

@media指令告诉浏览器这里是个媒体查询
and|not|only (media feature)意思是其中的规则只适用于视口宽度在**em以上的情况
Bryan Rieger对媒体查询的看法
 CSS媒体查询的（3级）规范
 CSS媒体查询(4级)的草案