2.9 CSS 响应式布局

1.媒体：@media

• 媒体类型：

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

• 媒体特性：

• • width：检测视口宽度。
  • max-width：检测视口最大宽度。
  • min-width：检测视口最小宽度。
  • height：检测视口高度。
  • max-height：检测视口最大高度。
  • min-height：检测视口最小高度。
  • device-width：检测设备屏幕的宽度。
  • max-device-width：检测设备屏幕的最大宽度。
  • min-device-width：检测设备屏幕的最小宽度。
  • orientation：检测视口的旋转方向(是否横屏)。

• • • portrait :视口处于纵向，即高度大于等于宽度。
    • landscape:视口处于横向，即宽度大于高度。

• 媒体运算符

• • and：并且，or|,：或，not：否定，only：肯定

@media screen and (max-width:700px) or (min-width:800px) {
  ……
}