响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本，以下是几种响应式布局简单介绍。

1. @media screen媒体查询布局

使用@media媒体查询针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。需要注意的是，使用媒体查询时要注意书写格式，以及优先级问题，不然很有可能导致媒体查询失效。

2. 百分比%布局

百分比是相对于包含块的计量单位，通过对属性设置百分比来适应不同的屏幕

包含块：

(1) 有父元素相对于父元素

(2) 无父元素相对于可视窗口

(3) 继承于父元素

需要注意的是它计算困难，如果定义一个元素的宽度和高度后，必须对着设计稿，换算成百分比单位。各个属性中如果使用百分比，相对父元素的属性并不是唯一的。所以一般不建议使用%来做响应式。

3. 弹性盒子布局（flex）

弹性布局是一种十分方便的，只需要依赖于CSS样式的实现响应式布局的方式，它会给子元素提供强大的空间分配和对齐能力。需要注意的是定义时要将flex定义在父元素，把父元素做为‘容器’，然后改变内部子元素的排列方式。在设置flex布局后，子元素中的float、clear都会失效。父元素设置display:flex后他的子元素都会变成块级元素。它有一个缺点是只能依靠自身的布局模式，稍有变化则无法改变。

4. rem布局

rem是相对于根元素的字体大小的单位，em只是一个相对父元素的字体大小的单位。rem布局的本质是等比缩放。

5. vw/vh布局

        css3中引入了一个新的单位vw/vh，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

以上内容部分来自网络，侵删。