一、概念
响应式网站常见特点：
同时适配PC + 平板 + 手机等
标签导航在接近手持终端设备时改变为经典的抽屉式导航
网站的布局会根据视口来调整模块的大小和位置
二、实现方式
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport
<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
属性对应如下：
width=device-width: 是自适应手机屏幕的尺寸宽度
maximum-scale:是缩放比例的最大值
inital-scale:是缩放的初始化
user-scalable:是用户的可以缩放的操作
实现响应式布局的方式有如下：
媒体查询
百分比
vw/vh
rem
媒体查询
CSS3 中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表
使用@Media查询，可以针对不同的媒体类型定义不同的样式，如：
@mediascreenand(max-width:1920px) { ... }
当视口在375px - 600px之间，设置特定字体大小18px
@mediascreen (min-width:375px)and(max-width:600px) {body{font-size:18px; }}
通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片
