CSS响应式布局

媒体查询

1.1 媒体类型

值	含义
all	检测所有设备。
screen	检测电子屏幕，包括：电脑屏幕、平板屏幕、手机屏幕等。
print	检测打印机。

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

1.2 媒体特性

值	含义
width	检测视口宽度。
max-width	检测视口最大宽度。
min-width	检测视口最小宽度。
height	检测视口高度。
max-height	检测视口最大高度。
min-height	检测视口最小高度。
device-width	检测设备屏幕的宽度。
max-device-width	检测设备屏幕的最大宽度。
min-device-width	检测设备屏幕的最小宽度。
orientation	检测视口的旋转方向（是否横屏）。 1. portrait ：视口处于纵向，即高度大于等于宽度。 2. landscape ：视口处于横向，即宽度大于高度。

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

1.3 运算符

值	含义
and	并且
, 或 or	或
not	否定
only	肯定

1.4 常用阈值

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

1.5 结合外部样式的用法

用法一：

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

用法二:

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