媒体查询

306 查看

媒体查询


1. 什么是媒体查询

HTML4CSS2支持为不同的媒体类型指定专用的样式表,screenprint, 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: 用来检测输出设备是网格设备还是位图设备

上述特性除scangrid外,其他的特性都可以指定min-(大于或者等于)或者max-(小于或者等于)前缀来指定范围