本文爲 H5EDU 機構官方 HTML5培訓 教程，主要介紹：CSS基礎教程 —— 媒體查詢屏幕適配
響應式佈局
Media Query 的使用方法
在上例中， 我們使用Media Queries來根據3種不同尺寸的窗口使用3種不同的樣式。通過不同的媒體類型和條件定義樣式表規則，媒體查詢讓CSS可以更精確作用於不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受min和max用於表達”大於或等於”和”小與或等於”。如：width會有min-width和max-width媒體查詢可以被用在CSS中的@media和@import規則上，也可以被用在HTML和XML中。通過這個標籤屬性，我們可以很方便的在不同的設備下實現豐富的界面，特別是移動設備，將會運用更加的廣泛。媒體查詢能夠獲取的值如下：
設備的寬和高device-width，device-heigth顯示屏幕/觸覺設備。
渲染窗口的寬和高width，heigth顯示屏幕/觸覺設備。
設備的手持方向，橫向還是豎向orientation(portrait|lanscape)和打印機等。
畫面比例aspect-ratio點陣打印機等。
設備比例device-aspect-ratio-點陣打印機等。
對象顏色或顏色列表color，color-index顯示屏幕。
設備的分辨率resolution。
語法結構及用法
媒體查詢有兩種使用方式， 一種是在CSS樣式中內嵌“@media”，在同一個CSS中通過不同窗口編寫不同的樣式去選擇。 另一種是使用外部樣式表的引用， 在@import和link中使用“@media”，根據不同的窗口大小選擇對應的樣式文件。這兩種方式的使用方法是一樣的。Media Queries的使用方法如下所示：
@media 設備類型 only (選取條件) not (選取條件) and (設備特性)，設備二 { 樣式代碼 }
在CSS3中的Media Queries模塊中支持對外部樣式表的引用， 使用方法類型如下代碼：
@import url(color.css) screen and (min-width: 1000px); /*使用@import導入css文件*/
或：
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" /> /*使用link導入外部css文件*/
簡寫：
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px) href="link.css" />
上面使用中only可省略，限定於計算機顯示器，第一個條件max-width是指渲染界面最大寬度，第二個條件max-device-width是指設備最大寬度。在樣式表中內嵌@media的代碼示例如下所示：
@media screen (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), (max-device-width:480px) and (orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) { 樣式代碼 }
簡寫：
@media screen and (max-width:640px) { 樣式代碼 }
在上面的示例代碼中，設置了電腦顯示器分辨率（寬度）大於或等於1024px（並且最大可見寬度爲989px）；屏寬在480px及其以下手持設備；屏寬在480px以及橫向（即480尺寸平行於地面）放置的手持設備；屏寬大於或等於480px小於1024px以及垂直放置設備的css樣式。從上面的例子可以看出，字符間以空格相連，選取條件包含在小括號內，樣式代碼爲兼容設置的樣式表，包含在中括號裏面。only（限定某種設備，可省略），and（邏輯與），not（排除某種設備）爲邏輯關鍵字，多種設備用逗號分隔，這一點繼承了css基本語法。
可用的設備類型
在上面的語法中，例如在CSS中嵌入“@media”的方式， 開頭必須書寫“@media”,然後指定設備類型（上例使用screen代表電腦顯示器）。CSS中定義了10種設備類型，可以指定的值與該值所代表的設備類型如表1-20所示：
表1-20 在Media Queries中可以指定的值與該值所代表的設備類型
可以指定的值 設置類型
All 所有設備
Braille 盲文，即盲人用點字法觸覺回饋設備
embossed 盲文打印機
handheld 手持的便攜設備
Print 文檔打印用紙或打印預覽視圖模式
projection 各種投影設備
Screen 彩色電腦顯示器屏幕
Speech 語言和音頻合成器
Tty 固定字母間距的網格的媒體，比如電傳打字機和終端
Tv 電視機類型的設備
可用的設備特性參數
通過設備類型可以區分使用的設備，再通過設備特性參數來設置同一設備的不同型號。例如，通過設備類型指定電腦顯示器， 再通過設備特性參數指用多大屏幕的顯示器。設備特性的書寫方式與樣式的書寫方式很相似， 分爲兩個部分，當中由冒號分割， 冒號前書寫設備的某種特性， 冒號後書寫該特性的具體值。例如“(min-width:320px)”。CSS中的設置特性共有13種， 是一個類似於CSS屬性的集合。但與CSS屬性不同的是，大部分設備特性的指定接受min/max的前綴， 用來表示大於等於或小於等於的邏輯，以此避免使用“<”和“>”這些字符。對於這13種設備特性參數的說明如表1-21所示：
表1-21 13種設備特性的說明
特性 可指定值 可用媒體類型 是否接受
min/max前綴 特性說明
width 帶單位的長度值
例如：640px 視覺屏幕/觸摸設備 允許 定義輸出設備中的頁面可見區域寬度(單位一般爲px)，即瀏覽器窗口的寬度
heigth 帶單位的長度值
例如：320px 視覺屏幕/觸摸設備 允許 定義輸出設備中的頁面可見區域高度(單位一般爲px)，即瀏覽器窗口的高度
device-width 帶單位的長度值
例如：640px 視覺屏幕/觸摸設備 允許 定義輸出設備的屏幕可見寬度(單位一般爲px)，即設備屏幕分辨率的寬度值
device-heigth 帶單位的長度值
例如：320px 視覺屏幕/觸摸設備 允許 定義輸出設備的屏幕可見高度(單位一般爲px) ，即設備屏幕分辨率的高度值
orientation 只能指定兩個值：
portrait 或 landscape 位圖介質類型 不允許 瀏覽器窗口的方向是縱向還是橫向， 當窗口商度大於等於寬度值是該特性值爲portait（橫向），否則爲landscape（豎向）
aspect-ratio 比例值
例如16/9 位圖介質類型 允許 定義’width’與’height’的比率，即瀏覽器的長寬比
device-aspect-ratio 比例值
例如16/9 位圖介質類型 允許 定義’device-width’與’device-height’的比率，即設備屏幕長寬比。如常見的顯示器比率：4/3， 16/9，16/10
color 整數值 視覺媒體 允許 設備使用多少位的顏色值，如果不是彩色設備，則值等於0
color-index 整數值 視覺媒體 允許 色彩表中的色彩數
monochrome 整數值 視覺媒體 允許 定義在一個單色框架緩衝區中每像素包含的單色原件個數。如果不是單色設備，則值等於0
resolution 分辨率值
例如300dpi 位圖介質類型 允許 定義設備的分辨率。如：96dpi，300dpi，118dpcm
scan 只能指定兩個值：
progressive 或interlace 電視類 不允許 定義電視類設備的掃描方式， progressive逐行掃描，interlace隔行掃描
grid 只能指定兩個值：
0 或1 柵格設備 不允許 用來查詢輸出設備是否使用柵格或基於位圖。1代表是，0代表否
可以使用and關鍵字來指定當某種設備類型的某種特性的值滿足某個條件時所使用的樣式， 例如以下語句指定了當設備窗口寬度小於640px時所使用的樣式：
@media screen and (max-width: 640px) { 樣式代碼 }
可以使用多條語句來將同一個樣式應用於不同的設備類型和設備特性中， 指定方式類似如下所示：
@media handheld and (min-width:360px), screen and (max-width: 480px) { 樣式代碼 }
可以在表達式中加上not關鍵字或only關鍵字， not關鍵字表示對後面的表達式執行取反操作， 書寫方法類似如下所示：
/* 樣式代碼將被使用在除便攜設備之外的其他設備或非彩色便攜設備中 */
@media not handheld and (color) { 樣式代碼 }
/* 樣式代碼將被使用在非彩色設備中 */
@media all and (not color) { 樣式代碼 }
使用only關鍵字的作用是讓那些不支持Media Queries但是能夠讀取Media Type的設備的瀏覽器將表達式的樣式隱藏起來。 例如：
@media only screen and (color) { 樣式代碼 }
上面的語句對於支持Media Queries的設備來說，將能夠正確應用樣式， 就像only不存在一樣。對於不支持Media Queries但能夠讀取Media Type的設備（例如IE8只支持“@media screen”）來說， 由於先讀到的是only而不是screen, 將忽略這個樣式。對於不支持Media Queries的瀏覽器（例如IE8之前的瀏覽器）來說， 無論是否有only, 都將忽略這個樣式。
在移動設備上設置原始大小顯示
在iPhone系列和iPod touch使用的是Safari瀏覽器， 支持前面介紹的媒體查詢表達式。 例如，使用iPhone分辨率是320px × 480px 去訪問我們前面的佈局示例，卻不是我們想看到的結果， 並不是從上到下排列顯示， 而是和電腦顯示器訪問的佈局是一樣的。爲什麼會這樣？因爲在iPhone中使用的Safari瀏覽器在進行頁面顯示時是將窗口的寬度作爲980px進行顯示的， 因爲太多網頁是按照800px左右標準進行製作的， 所以Safari瀏覽器默認按照980px的寬度來顯示，就可以正常顯示絕大多數的網頁了。所以即使在頁面中已經寫好了頁面在小尺寸窗口中運行的樣式， iPhone中的Safari瀏覽器也不會使用這個樣式， 而是選擇窗口寬度爲980px時所使用的樣式。 所以我們需要在移動設備上設置原始大小顯示和是否縮放的聲明。是在頁面的頭部<head></head>之間加上下面這樣的語句∶
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
或
<meta name="viewport" content="width=600px " />
meta 標籤的viewport屬性是在移動設備上設置原始大小顯示和是否縮放的聲明。可以使用的參數設置如下∶
width ： viewport的寬度
height ： viewport的高度
initial-scale ： 初始的縮放比例
minimum-scale ： 允許用戶縮放到的最小比例
maximum-scale ： 允許用戶縮放到的最大比例
user-scalable ： 用戶是否可以手動縮放
如果在頁面中已經準備好了在小尺寸的窗口中使用的樣式， 並且有可能在iPhone或iPod touch中被打開時，請不要忘記了加入<meta>標籤並在標籤中寫入指定的窗口寬度。其實還可以通過viewport把自己冒充成更寬的屏幕。