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

1、設置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 咱們不但願用戶縮放頁面

 

2、加載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]-->

3、設置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以最高的文檔模式展示效果。

 

4、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：檢測輸出的設備是網格的仍是位圖設備。