响应式布局顾名思义就是随电脑屏幕的大小而改变，响应式布局就是用不同的终端来查看页面，可以根据不同的大小来显示页面。响应式布局又优点，也有缺点，优点是：面对不同分辨率设备灵活性强。能够快速解决多设备显示适应问题。缺点：兼容各种设备工作量大，效率低下，代码累赘，会出现一些隐藏无用的元素 ，加载时间长，响应式布局也是一种程度上折衷性质的设计解决方案，多方面因素影响而达不到最佳效果，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。这就是响应式布局。
首先我们先认识一下什么是 media 属性吧
@media screen and (min-width: 320px) and (max-width : 479px)
就从这个条件语句开始介绍， media 属性后面跟着的是一个 screen 的媒体类型（上面说过的十种媒体类型之一）。然后用 and 关键字来连接条件，然后括号里就是一个媒体查询语句，稍微懂点 css 的同学都能看懂，这个条件语句意思是在大于 320 小于 479 的分辨率下所激活的样式表。
这个语句就是响应式布局的基础应用了，在给它赋予不同的值就能在不同的大小屏幕上显示了。 我们在上面了解了什么是响应式布局，那在我们的实际项目中应该怎么去设计呢 ? 在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰，现在还要来个不同尺寸设备，我们该怎么淡定下来呢 ? 有需求就会有解决方案，呵呵， 说到响应式布局， 就不得不提起 CSS3 中的 Media Query （媒介查询），这可是个好东西，易用、强大、快捷 ……Media Query 是制作响应式布局的一个利器， 使用这个工具， 我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解 Media Query 。通过不同的媒体类型和条件定义样式表规则。媒体查询让 CSS 可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min 和 max 用于表达 ] 大于或等于 ] 和 ] 小与或等于。如： width 会有 min-width 和 max-width 媒体查询可以被用在 CSS 中的 @media 和 @import规则上， 也可以被用在 HTML 和 XML 中。 通过这个标签属 性，我们可以很方便的在不同的设备下实现丰富的界面， 特别是移动设备， 将会运用更加的广泛。 所以使用响应式媒体对象，就一定要学会 meidia query 查询。
所以响应式布局在 html 中是一个非常一个不错的设计理念，响应式布局给大家带来了许多的方便，让大家在不同的设备中也能看一些页面。