## 响应式：即在不同的显示设备上以不同的效果显示相同内容的页面
### 实现方式：通过媒体查询，对需要显示不同效果的地方进行css样式重写
~~~
@media only screen and (max-width: 500px) {
/*css code*/
}
@media screen and (min-width:300px) and (max-width:500px) {
/* CSS 代码 */
}
~~~
> **max-width: 定义输出设备页面最大的可见区域宽度
> max-height 定义输出设备页面最大的可见区域高度**
