媒體查詢

媒體查詢

---

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-(小於或者等於)前綴來指定範圍