响应式布局属性名称作用 width、height 浏览器可视宽度、高度 device-width 设备屏幕的宽度 de

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。
响应式布局通过媒体查询（@media）对不同宽度的设备进行布局和样式的设置，从而达到适配不同设备的目的。

传统布局方案：pc端做一套网页，移动端做一套网页。根据用户的设备自动加载对应的网页。
缺点: 开发周期长，维护成本较高。
响应式布局方案：根据设备的不同尺寸，通过媒体查询响应(显示)与其适配的布局。一套代码兼容多种设备，开发和维护成本比传统方案低。也是目前的主流方案。

媒体查询

媒体查询 (Media Query) 是CSS3的新语法。

使用 @media 查询，可以针对不同的媒体类型定义不同的样式，根据屏幕尺寸设置不同的样式。
当重置浏览器大小的过程中，页面也会根据浏览器的高度和宽度重新渲染页面。

示例：

1. style 标签
写在 style 标签中，有条件的执行某个内部样式表。

2. link 引入
写在 link 标签中，有条件的引入外部样式表。

rem (root em) 是CSS3中新增的单位。
rem 单位是相对于根元素(html)的 font-size 来决定大小的。
可以通过修改 html 页面里的 font-size 来改变页面中以 rem 为单位的元素的大小，从而实现响应式布局。