優點:無需外掛程式和手機主題,對移動裝置友好,能夠適應各種視窗大小。只需在css中新增@media screen屬性,根據瀏覽器寬度判斷並輸出不同的長寬值
準備工作1：設定meta標籤
首先我們在使用media的時候需要先設定下面這段**，來相容移動裝置的展示效果：
這段**的幾個引數解釋：
width = device-width：寬度等於當前裝置的寬度
height = device-height：高度等於當前裝置的高度
initial-scale：初始的縮放比例（預設設定為1.0）
minimum-scale：允許使用者縮放到的最小比例（預設設定為1.0）
maximum-scale：允許使用者縮放到的最大比例（預設設定為1.0）
user-scalable：使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面）
準備工作2：載入相容檔案js
因為ie8既不支援html5也不支援css3 media，所以我們需要載入兩個js檔案，來保證我們的**實現相容效果：
準備工作3：設定ie渲染方式預設為最高(這部分可以選擇新增也可以不新增)
現在有很多人的ie瀏覽器都公升級到ie9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是ie9的瀏覽器，但是瀏覽器的文件模式卻是ie8:
為了防止這種情況，我們需要下面這段**來讓ie的文件模式永遠都是最新的：
（如果想使用固定的ie版本，可寫成：）
不過我最近又發現了乙個更給力的寫法：
怎麼這段**後面加了乙個chrome=1，這個google chrome frame（谷歌內嵌瀏覽器框架gcf），如果有的使用者電腦裡面裝了這個chrome的外掛程式，就可以讓電腦裡面的ie不管是哪個版本的都可以使用webkit引擎及v8引擎進行排版及運算，無比給力，不過如果使用者沒裝這個外掛程式，那這段**就會讓ie以最高的文件模式展現效果。這段**我還是建議你們用上，不過不用也是可以的。
@media screen and (max-width: 960px)
}這個應該算是乙個media的乙個標準寫法，上面這段css**意思是：當頁面小於960px的時候執行它下面的css.這個應該沒有太大疑問。
應該有人會發現上面這段**裡面有個screen，他的意思是在告知裝置在列印頁面時使用襯線字型，在螢幕上顯示時用無襯線字型。但是目前我發現很多**都會直接省略screen,因為你的**可能不需要考慮使用者去列印時，你可以直接這樣寫：
@media (max-width: 960px)
}css2 media用法
其實並不是只有css3才支援media的用法，早在css2開始就已經支援media，具體用法，就是在html頁面的head標籤中插入如下的一段**：
上面其實是css2實現的襯線用法，那css2的media難道就只能支援上面這乙個功能嗎？答案當然不是，他還有很多用法。
例如我們想知道現在的移動裝置是不是縱向放置的顯示屏，可以這樣寫：
我們把第一段的**也用css2來實現，讓它一樣可以讓頁面寬度小於960的執行指定的樣式檔案：
既然css2可以實現css的這個效果為什麼不用這個方法呢，很多人應該會問，但是上面這個方法，最大的弊端是他會增加頁面http的請求次數，增加了頁面負擔，我們用css3把樣式都寫在乙個檔案裡面才是最佳的方法。
回歸css3 media
上面我們大概講了下css2的**查詢用法，現在我們重新回到css3的**查詢，在第一段**上面我用的是小於960px的尺寸的寫法，那現在我們來實現等於960px尺寸的**：
@media screen and (max-device-width:960px)
}然後就是當瀏覽器尺寸大於960px時候的**了：
@media screen and (min-width:960px)
}我們還可以混合使用上面的用法：
@media screen and (min-width:960px) and (max-width:1200px)
}上面的這段**的意思是當頁面寬度大於960px小於1200px的時候執行下面的css。
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：檢測輸出的裝置是網格的還是位圖裝置。
注意下順序，如果你把@media (min-width: 768px)寫在了下面那麼很悲劇，
@media (min-width: 1200)
@media (min-width: 992px)
@media (min-width: 768px)
因為如果是1440,由於1440>768那麼你的1200就會失效。
所以我們用min-width時，小的放上面大的在下面，同理如果是用max-width那麼就是大的在上面，小的在下面
@media (max-width: 1199)
@media (max-width: 991px)
@media (max-width: 767px)
1280解析度以上（大於1200px）
@media screen and (min-width:1200px)#content,.div1#secondary
}1100解析度（大於960px，小於1199px）
@media screen and (min-width: 960px) and (max-width: 1199px) #content,.div1#secondaryselect
}880解析度（大於768px，小於959px）
@media screen and (min-width: 768px) and (max-width: 959px) #content,.div1#secondaryselect
}720解析度（大於480px，小於767px）
@media only screen and (min-width: 480px) and (max-width: 767px)#content,.div1#secondary#access#access a #access a img#rss#branding #s
}440解析度以下（小於479px）
@media only screen and (max-width: 479px) #content,.div1#secondary#access #access a #access a img#rss#branding #s#access ul ul a
}/* 豎屏 */
@media screen and (orientation: portrait) and (max-width: 720px)
/* 橫屏 */
@media screen and (orientation: landscape)
上面的**中用到了screen ，他的意思是在告知裝置在列印頁面時使用襯線字型，在螢幕上顯示時用無襯線字型。但是目前我發現很多**都會直接省略screen,因為你的**可能不需要考慮使用者去列印時。
pc端按螢幕寬度大小排序（主流的用橙色標明）
解析度 比例 | 裝置尺寸
1024500 （8.9寸）
1024768 （比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; ）
1280800（16：10 |15.4寸）
12801024(比例：5：4 | 14.1寸、15.0寸)
1280854(比例：15：10 | 15.2）
1366768 (比例：16：9 | 不常見）
1440900 （16：10 17寸 僅蘋果用）
14401050（比例：5：4 | 14.1寸、15.0寸）
16001024（14：9 不常見）
16001200 （4：3 | 15、16.1）
16801050（16：10 | 15.4寸、20.0寸）
19201200 (23寸）
通過上面的電腦遮蔽及尺寸的例表上我們得到了幾個寬度
1024 1280 1366 1440 1680 1920
css**
@media (min-width: 1024px)
} />=1024的裝置/
@media (min-width: 1100px)
} />=1024的裝置/
@media (min-width: 1280px)
}@media (min-width: 1366px)
}@media (min-width: 1440px)
}@media (min-width: 1680px)
}@media (min-width: 1920px)
}
利用 media screen實現網頁布局的自適應
經常為不同解析度裝置或不同視窗大小下布局錯位而頭疼,可以利用 media screen實現網頁布局的自適應,優點 無需外掛程式和手機主題,對移動裝置友好,能夠適應各種視窗大小 只需在css中新增 media screen屬性,根據瀏覽器寬度判斷並輸出不同的長寬值 media screen and m...
利用 media screen實現網頁布局的自適應
經常為不同解析度裝置或不同視窗大小下布局錯位而頭疼，可以利用 media screen實現網頁布局的自適應。優點 無需外掛程式和手機主題，對移動裝置友好，能夠適應各種視窗大小，只需在css中新增 media screen屬性，根據瀏覽器寬度判斷並輸出不同的長寬值。以下是針對自用主題而寫的css，對寬...
利用 media screen實現網頁布局的自適應
利用 media screen實現網頁布局的自適應 優點 無需外掛程式和手機主題,對移動裝置友好,能夠適應各種視窗大小。只需在css中新增 media screen屬性,根據瀏覽器寬度判斷並輸出不同的長寬值 1280解析度以上 大於1200px media screen and min width ...