00一、媒體查詢 @media

一、媒體查詢介紹

    使用 @media 查詢，你能夠針對不一樣的屏幕大小定義不一樣的樣式。 @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。 當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面，這對調試來講是一個極大的便利。

CSS 語法

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

媒體類型（mediaType ）

類型有不少，在這裏不一一列出來了，只列出了經常使用的幾個。

值	描述
all	用於全部設備
print	用於打印機和打印預覽
screen	用於電腦屏幕，平板電腦，智能手機等。（最經常使用）
speech	應用於屏幕閱讀器等發聲設備

二、編寫以前呢，有幾個要準備的工做

準備工做1：設置Meta標籤

首先咱們在使用 @media 的時候須要先設置下面這段代碼，來兼容移動設備的展現效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

準備工做2：加載兼容文件JS

由於IE8既不支持HTML5也不支持CSS3 @media ，因此咱們須要加載兩個JS文件，來保證咱們的代碼實現兼容效果：

<!--[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 爲了防止這種狀況，咱們須要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的

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

這段代碼後面加了一個chrome=1，若是用戶的電腦裏安裝了 chrome，就可讓電腦裏面的IE無論是哪一個版本的均可以使用Webkit引擎及V8引擎進行排版及運算，若是沒有安裝，就顯示IE最新的渲染模式。

代碼實例

a、若是文檔寬度小於等於 300px 則應用花括號內的樣式——修改body的背景顏色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

從上面的代碼能夠看出，媒體類型是屏幕（screen），使用 一個 and 鏈接後面的媒體功能，這裏寫的是 max-width:300px ，也就是說，當屏幕的最大寬度 小於等於 300px 的時候，就應用花括號裏面的樣式。

b、當文檔寬度大於等於300px 的時候顯示的樣式

@media screen and (min-width: 300px){
    body {
        background-color:lightblue;
    }
}

三、經常使用的尺寸

設置的常有：

@media screen and (min-width:1200px)

@media screen and (min-width:992px)

@media screen and (min-width:768px)

@media screen and (min-width:480px)

在設置時，須要注意前後順序，否則後面的會覆蓋前面的樣式。

    從最佳用戶體驗來看，材料化設計用戶界面應該適應以下佈局尺寸：480、600、840、960、1280、1440和1600dp（設備獨立像素）：

分界點(dp)	手機/平板電腦豎屏	手機/平板電腦橫屏	屏幕	列數	間隔寬度(dp)
0	small handset		超小	4	16
360	medium handset		超小	4	16
400	large handset		超小	4	16
480	large handset	small handset	超小	4	16
600	small tablet	medium handset	小	8	16/24*
720	large tablet	large handset	小	8	16/24*
840	large tablet	large handset	小	12	16/24*
960		small tablet	小	12	24
1024**		large tablet	中等	12	24
1280**		large tablet	中等	12	24
1440**			大	12	24
1600**			大	12	24
1920**			超大	12	24

注：上述表格中，*號表示當設備最小寬度小於600時取值16dp。**表示在桌面系統中分界點要比所列值小16dp以適應Chrome瀏覽器的變化。