媒體查詢media參數以及其兼容性問題

一、設置meta標籤

在使用媒體查詢media之前我們需要先設置meta標籤，對設備的縮放等參數進行設定。

<!--設置縮放和繪製-->
<meta name="viewport" content="width=device-width, initial-scale=1,minmum-scale=1,maxmum-scale=1,user-scalable=no">

參數解釋：

width=device-width   寬度等於當前設備寬度

initial-scale=1初始縮放比例，默認爲1

minmum-scale=1允許用戶縮放到的最小比例，默認爲1

maxmum-scale=1允許用戶縮放到的最大比例，默認爲1

user-scalabel=no用戶是否可以手動縮放，默認設置爲no 我們不希望用戶縮放頁面

二、加載IE兼容文件

因爲IE8既不支持HTML5也不支持CSS3 Media，所以我們需要加載兩個JS文件，來保證我們的代碼實現兼容效果：

<!--加載meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

三、設置IE默認渲染方式

現在有很多人的IE瀏覽器都升級到IE9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8:

解決辦法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

這句話的意思是將IE瀏覽器默認的渲染方式設爲電腦上所裝IE瀏覽器的最高標準，比如我電腦上裝了IE10和IE8兩個瀏覽器，如果我用IE8瀏覽器打開這個頁面，會以IE10 的標準來渲染頁面。

如果有的用戶電腦裏面裝了這個chrome的插件，就可以讓電腦裏面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算，無比給力，不過如果用戶沒裝這個插件，那這段代碼就會讓IE以最高的文檔模式展現效果。

四、media 參數

• width:瀏覽器可視寬度。

• height:瀏覽器可視高度。

• device-width:設備屏幕的寬度。

• device-height:設備屏幕的高度。

• orientation:檢測設備目前處於橫向還是縱向狀態。

• aspect-ratio:檢測瀏覽器可視寬度和高度的比例。(例如：aspect-ratio:16/9)

• device-aspect-ratio:檢測設備的寬度和高度的比例。

• color:檢測顏色的位數。（例如：min-color:32就會檢測設備是否擁有32位顏色）

• color-index:檢查設備顏色索引表中的顏色，他的值不能是負數。

• monochrome:檢測單色楨緩衝區域中的每個像素的位數。（這個太高級，估計咱很少會用的到）

• resolution:檢測屏幕或打印機的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

• grid：檢測輸出的設備是網格的還是位圖設備。

部分參考來自：點擊打開鏈接