標籤：
媒體查詢可以讓我們根據裝置顯示的特性為其設定CSS樣式。可以在不改變頁面內容的情況下，為特定的一些輸出設變指定顯示效果。
一、媒體查詢文法
1、<link>標籤：通過link標籤的media屬性為樣式表指定裝置類型，例如：
以下代碼錶示媒體類型是顯示屏，媒體特性為顯示屏縱向放置，此時才引入cssy樣式
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="screen-style.css">
更進一步，還可以寫一個媒體查詢列表。查詢列表中的任意一個查詢為真，則負載檔案。全部查詢都不為真，則不載入。例子如下：表示只有顯示屏縱向放置，且視口大於800px或者為投影儀時才引入css樣式
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px), projection" href="800wide-portrait-screen.css" />
註：（1）媒體查詢之間使用逗號分隔
（2）projection 之後，沒有and，也沒有任何特性/值的組合。沒有後續運算式，意味著只要是projection 就滿足條件。本例中，樣式會應用於所有的投影儀。
2、在CSS樣式表中使用媒體查詢 ：例如，將下面的代碼插入樣式表，在螢幕寬度《=400px的裝置上，h1元素文字就會變綠色 （最佳方式）
@media screen and (max-device-width : 400px) {h1 {color:green} }
3、使用CSS的@import指令：在當前樣式表中按條件引入其他樣式表； 例如下面代碼會給視口最大寬度為360px的顯示屏載入一個名為phone.css的樣式表
@import url ("phone.css") screen and(max-width : 360px);
註： 使用@import方式會增加HTTP請求（會影響載入速度），應該謹慎使用。
二、媒體查詢能檢測哪些特性
width/height：視口寬高；
device-width/height：裝置螢幕的寬高；
orientation：檢查裝置處於橫向還是縱向；
device-aspect-ratio/aspect-ratio：基於裝置/視口的寬高比；
color：每種顏色的位元。例如 min-color：16會檢測裝置是否擁有16位顏色；
color-index：裝置的色彩索引表中的顏色數。值必須是非負整數。
monochrome：檢測單色框架緩衝區中每像素所使用的位元。值必須是非負整數，如 monochrome: 2。
resolution：用來檢測螢幕或印表機的解析度，如min-resolution: 300dpi。還可以接受每厘米像素點數的度量值，如min-resolution: 118dpcm。
scan：電視機的掃描方式，值可設為progressive（漸進式掃描）或interlace（隔行掃描）
grid：用來檢測輸出裝置是網格裝置還是位元影像裝置。
三、用媒體查詢改造我們的設計
CSS層疊樣式表，即樣式表中後面的樣式會覆蓋前面相同的樣式（更高優先順序除外），所以可以利用媒體查詢重寫相應的部分
四、阻止行動瀏覽器自動調整頁面大小
iOS 和Android 瀏覽器都基於WebKit（http://www.webkit.org/）核心。這兩種瀏覽器以及很多其他瀏覽器（如Opera Mobile），都支援用 viewport meta 元素覆蓋預設的畫布縮放設定。在HTML的<head>標籤中插入<meta>標籤，在<meta>中可以設定具體寬度或縮放比例，例如，以下代碼是將一個頁面放大到裝置實際尺寸兩倍顯示
<meta name="viewport" content="initial-scale=2.0,width=device width" />
一般，我們需要將縮放比設定為1.0，表示瀏覽器將按照視口的實際大小渲染頁面，同時，將寬度設定為裝置寬度表示瀏覽器都會按照裝置實際大小來渲染頁面，如下
<meta name="viewport" content="width=device-width,initial=scale=1.0" />
五、小結
媒體查詢只能為我們提供自適應設計效果，不是完全的響應式。能讓我們的設計在媒體查詢設定的斷點之間靈動顯示的是流動布局。
響應式設計：媒體查詢
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
