响应式开发
[ 网页布局方式 ] 以下几种方式并不是独立存在的，实际开发过程中往往是相互结合使用的。
- 固定宽度布局：为网页设置一个固定的宽度，通常以 px 作为长度单位，常见于 PC 端网页。
- 流式布局：为网页设置一个相对的宽度，通常以百分比作为长度单位。如，移动端开发。
- 栅格式布局：将网页宽度人为的划分为均等的长度，然后排版布局时则以这些均等的长度作为度量单位，通常利用百分比作为长度单位来划分均等的长度。常见于一些前端框架，如 Bootstrap。
- 响应式布局：通过检测设备信息，决定网页的布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
响应式开发
在移动互联日益成熟的时候，桌面浏览器上开发的网页已经不能够满足移动端设备的展示和阅读。之前，通常的做法是对移动端单独开发一套特定的版本；但是，由于需要考虑多屏幕的适配，移动端设备越多的时候开发成本太大，而响应式开发，可以根据屏幕尺寸大小对内容和布局做出适当的调成， 从而提供更好的用户感受，也是因为响应式开发的出现， 开发者也无需对不同尺寸设备而特殊定制不同的页面， 这大大降低了开发成本和缩短了开发时间。
这样的方法也同样存在着缺点。 缺点是同样的资源被加载，但因为展示平台所限并不能全部显示。
[ 响应式开发和移动web开发的区别 ]
[ 原理：媒体查询？！]
[1] 查询媒介：查询到当前屏幕（媒介媒体）的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。简单来说，你可以设置不同屏幕下面的不同的样式，从而达到适配不同屏幕的目的。
[2] 实现方式 — 响应式布局：通过查询 screen 的宽度来指定某个宽度区间的网页布局。
Responsive design：意在表现不同屏幕分辨率的终端上浏览网页的不同展示方式，通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
一般我们会对常见的设备尺寸进行划分后，再分别确定为不同尺寸的设备设计专门的布局方式，如下所示：
以上是我们对常见的尺寸进行分类后的结果，下面是与之相对应的媒体查询条件：
