媒体查询

媒体查询

---

1. 什么是媒体查询

HTML4和CSS2支持为不一样的媒体类型指定专用的样式表，screen和print, projection是已定义的媒体类型

媒体查询由 媒体类型 和 一个或多个检测媒体特性的的条件表达式组成

相对于CSS2只支持对媒体类型进行判断，媒体查询增长了媒体特性的判断，可以更准确地根据设备特性指定专用的样式

2. 如何使用媒体查询

2.1. 在引入外部样式表时使用媒体查询

<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css">

2.2. 在样式表中使用媒体查询

@media screen and (max-width:320px){
  h1{
    color:green;
  }
}

2.3. 经过import引入样式表时使用媒体查询

@import url(phone.css) screen and (max-width:360px);

3. 媒体查询可以检测的特性

• width: 视口宽度

• height: 视口高度

• device-width: 渲染表面的高度(设备高度)

• device-height: 渲染表面的宽度(设备宽度)

• orientation: 检测设备是处于横向(landscape)仍是纵向(portrait)

• aspect-ratio: 基于视口宽度和高度的宽高比

• device-aspect-ratio: 基于设备渲染表面的宽度和高度的宽高比

• color: 每种颜色的位数

• color-index: 设备的颜色索引表中的颜色数

• monochrome: 检测单色帧缓冲区中每像素所使用的位数

• resoluion: 用来检测屏幕和打印机的分辨率,dpi/dpcm

• scan: 电视机的扫描方式,逐行扫描(progressive)或隔行扫描(interlace)

• grid: 用来检测输出设备是网格设备仍是位图设备

上述特性除scan和grid外，其余的特性均可以指定min-(大于或者等于)或者max-(小于或者等于)前缀来指定范围