【HTML&CSS】CSS媒體查詢

CSS Media Queries 簡介

• Media Queries，其做用就是容許添加表達式用以肯定媒體的環境狀況，以此來應用不一樣的樣式表，改變頁面的佈局以精確適應不一樣的設備。

CSS Media Queries 使用方式

• 方法1：在 標籤的media屬性中指明設備類型和尺寸，當符合時引入當前標籤中的CSS文件；

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

• 方法2：在CSS代碼頭部，用@media屬性指定設備類型和尺寸，當符合時用當前代碼覆蓋相關已有樣式；

<style>
@media screen  and (min-width: 400px)
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}
</style>

CSS Media Queries 語法

一、使用 標籤：

<link rel="stylesheet" type="text/css" media="media_type1,media_type2 keyword (media_feature expression)" href="mystylesheet1.css">
<link rel="stylesheet" type="text/css" media="media_type3 keyword (media_feature expression)" href="mystylesheet2.css">

二、在CSS代碼中使用：

@media media_type1,media_type2 keyword (media_feature expression) {
    CSS-Code;
}

三、兩種用法中的media_feature expression具體語法：

基本語法: (media_feature:value)
語法細節：表達式中能夠加入keyword，例如：(media_feature:value keyword media_feature:value)或者(keyword media_feature:value)【後一個待考證】；

CSS Media Queries 參數對照表

• media_type（設備類型）: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed

media_type	描述
❤all	用於全部的媒體設備。
aural	用於語音和音頻合成器。
braille	用於盲人用點字法觸覺回饋設備。
handheld	用於小的手持的設備。
❤print	用於打印機和打印預覽。
projection	用於投影設備。
❤screen	用於電腦、平板、手機顯示器。
❤speech	應用於屏幕閱讀器等發聲設備。
tty	用於使用固定密度字母柵格的媒體，好比電傳打字機和終端。
tv	用於電視機類型的設備。
embossed	用於分頁的盲人用點字法打印機。

注：標記有❤的爲經常使用類型。

• keyword（關鍵字）： not | only | and

keyword	描述
not	not是用來排除掉某些特定的設備的，好比 @media not print（非打印設備）。
only	用來定某種特別的媒體類型。 對於支持Media Queries的移動設備來講， 若是存在only關鍵字， 移動設備的Web瀏覽器會忽略only關鍵字並直接根據後面的表達式應用樣式文件。 對於不支持Media Queries的設備但可以讀取Media Type類型的Web瀏覽器， 遇到only關鍵字時會忽略這個樣式文件。
and	而且

注：not/only用在範圍首部表示應用於當前範圍的條件,and用在多個範圍中間表示範圍條件的疊加。

• media_feature（媒體特徵）:
  | width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

media_feature	描述
aspect-ratio	定義輸出設備中的頁面可見區域寬度與高度的比率。
color	定義輸出設備每一組彩色原件的個數。若是不是彩色設備，則值等於0。
color-index	定義在輸出設備的彩色查詢表中的條目數。若是沒有使用彩色查詢表，則值等於0。
device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的比率。
device-height	定義輸出設備的屏幕可見高度。
device-width	定義輸出設備的屏幕可見寬度。
grid	用來查詢輸出設備是否使用柵格或點陣。
height	定義輸出設備中的頁面可見區域高度。
max-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最大比率。
max-color	定義輸出設備每一組彩色原件的最大個數。
max-color-index	定義在輸出設備的彩色查詢表中的最大條目數。
max-device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最大比率。
max-device-height	定義輸出設備的屏幕可見的最大高度。
max-device-width	定義輸出設備的屏幕最大可見寬度。
max-height	定義輸出設備中的頁面最大可見區域高度。
max-monochrome	定義在一個單色框架緩衝區中每像素包含的最大單色原件個數。
max-resolution	定義設備的最大分辨率。
max-width	定義輸出設備中的頁面最大可見區域寬度。
min-aspect-ratio	定義輸出設備中的頁面可見區域寬度與高度的最小比率。
min-color	定義輸出設備每一組彩色原件的最小個數。
min-color-index	定義在輸出設備的彩色查詢表中的最小條目數。
min-device-aspect-ratio	定義輸出設備的屏幕可見寬度與高度的最小比率。
min-device-width	定義輸出設備的屏幕最小可見寬度。
min-device-height	定義輸出設備的屏幕的最小可見高度。
min-height	定義輸出設備中的頁面最小可見區域高度。
min-monochrome	定義在一個單色框架緩衝區中每像素包含的最小單色原件個數。
min-resolution	定義設備的最小分辨率。
min-width	定義輸出設備中的頁面最小可見區域寬度。
monochrome	定義在一個單色框架緩衝區中每像素包含的單色原件個數。若是不是單色設備，則值等於0。
orientation	定義輸出設備中的頁面可見區域高度是否大於或等於寬度。
resolution	定義設備的分辨率。如：96dpi, 300dpi, 118dpcm。
scan	定義電視類設備的掃描工序。
width	定義輸出設備中的頁面可見區域寬度。

注：(media_feature) value:須要帶上單位；

CSS Media Queries 瀏覽器支持情況

瀏覽器	第一個支持的版本
Chrome	21
IE	9
Firefox	3.5
Safari	4.0
Opera	9