CSS3响应式布局

实现响应式布局用的媒体查询

一、媒体类型

二、媒体特性

完整列表请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

三、运算符

四、常用阈值

在实际开发中，会将屏幕划分成几个区间，例如：

五、结合外部样式的用法

5.1. 用法一

<link rel="stylesheet" media="具体的媒体查询" href="mystylesheet.css">

5.2. 用法二

@media screen and (max-width: 768px) {
  /*CSS-Code;*/
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  /*CSS-Code;*/
}