標籤：ie瀏覽器 相容性 media 標籤 html5
媒體查詢多用於響應式網頁中。
1.初始化設定：
在HTML檔案中，網頁頂部<head></head>標籤中插入一句話：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
這句話在於對響應式網頁做一個初始化設定，主要包括：
name="viewport"：標記顯示裝置為視口；
width = device-width：寬度等於當前裝置的寬度；
initial-scale：初始的縮放比例（預設設定為1.0）；
minimum-scale：允許使用者縮放到的最小比例（預設設定為1.0）；
maximum-scale：允許使用者縮放到的最大比例（預設設定為1.0）；
user-scalable：使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面）。
2.解決IE瀏覽器的相容性問題：
因為IE瀏覽器(IE8)不支援HTML5和CSS3中的media，所以要載入用於解決IE瀏覽器安全色性問題的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]-->
兩個<script></script>標籤中的src屬性所指向的檔案連結地址為固定地址中的檔案，直接異地引用就好，不用下載到本地引用。
3.設定IE的渲染方式為最高：
現在有很多人的IE瀏覽器都升級到IE9以上，這個時候會有很多詭異的事情發生，例如現在是IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8，為了防止這種情況，我們需要下面這段代碼來讓IE的文檔模式永遠都是最新：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
當然還有一個更給力的寫法：
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
這段代碼後面加了一個chrome=1，這是由於Google Chrome Frame（Google內嵌瀏覽器架構GCF），如果使用者電腦安裝這個chrome外掛程式，就可讓電腦內的IE瀏覽器規避版本因素，使用Webkit引擎及V8引擎進行排版及運算。當然如果使用者沒裝這個外掛程式，這段代碼就會讓IE瀏覽器以最高的文檔模式展現效果。
4.CSS3 media 媒體查詢的寫法：
@media screen and (max-width: 960px){body{background: #000;}}
這是一個media的標準寫法，在CSS檔案中，意為：當頁面小於960px時執行以下CSS代碼，具體內容暫不用管。
對於上述代碼中的screen，意為在告知裝置在列印頁面時使用襯線字型，在螢幕上顯示時用無襯線字型。目前很多網站都會直接省略screen,從而不需要考慮使用者列印網頁的需求，所以又有這種寫法：
@media (max-width: 960px){body{background: #000;}}
本著思維嚴謹的原則，個人不會採用這種寫法。
5.CSS3媒體查詢主體程式碼群組合：
在響應式網頁布局中需要持續運用媒體查詢程式碼群組合，主要作用在於判斷所適配螢幕的寬度，並根據各種寬度條件套用不同的CSS樣式。
如當螢幕寬度等於960px時，將網頁背景色變為紅色：
@media screen and (max-device-width:960px){body{background:red;}}
如當螢幕寬度最大為960px（小於960px）時，將網頁背景色變為黑色：
@media screen and (max-width: 960px){body{background: #000;}}
如當螢幕寬度最小為960px（大於960px）時，將網頁背景色變為桔色：
@media screen and (min-width:960px){body{background:orange;}}
更為常見的是混合使用，如當螢幕寬度介於960px和1200px之間時，將網頁背景色變為黃色：
@media screen and (min-width:960px) and (max-width:1200px){body{background:yellow;}}
6.總體開發思路：
使用CSS3中媒體查詢的大致思路就是判斷網頁在不同裝置中所處的寬度範圍，這樣的範圍可能有三種（PC、平板、手機），也可能有四種（PC、平板、中大屏手機、小屏手機），當然也可能只需要兩種（平板、手機，PC端單獨開發一版時可不作為CSS3媒體查詢的使用對象），並為各種寬度範圍情況下的所需頁面元素套用不同的CSS樣式，從而適配各種裝置。
7.響應式網頁開發中的寬度問題：
在實際開發中，通常需要設定響應式網頁寬度的最大值，一旦忽略最大寬度，臃腫或零散的網頁布局都會造成視覺洪災，也就是我們常說的看起來很low。
另外談談目前顯示裝置中的網頁寬度問題（由於篇幅問題，就不從工業革命開始扯了），目前最為常見的寬度基本上都是：大於或等於960px的PC端（1920px、1600px、1440px、1280px、1140px、960px）、960px至640px之間的平板端（768px、640px）以及640px以下的手機端（480px、320px），以上寬度存在已久，且顯示裝置中的網頁寬度會長期處於這樣的狀態下，在響應式網頁寬度設計上，基本從這幾個尺寸考慮就已經足夠。
8.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：檢測輸出的裝置是網格的還是位元影像裝置。
9.擴充——在CSS2中同樣有媒體查詢：
media媒體查詢並不是CSS3誕生之後的專用功能，早在CSS2開始就已經支援media，比如：
在HTML檔案中的<head></head>標籤中寫入這句：
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
以上是CSS2實現的襯線用法，href屬性中寫入在某單一顯示裝置中連結的CSS檔案，但僅供入門，
如要判斷行動裝置是否為縱向放置的顯示屏，可以這樣寫：
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">
如要讓小於960px的頁面執行指定的CSS樣式檔案，可以這樣寫：
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">
當然，CSS2中的媒體查詢方法放到現在並不推薦使用，最大的弊端在於這樣會增加頁面http的請求次數，增加頁面負擔，使用CSS3中的媒體查詢才是目前的最佳方法。
本文出自 “11385864” 部落格，請務必保留此出處http://11395864.blog.51cto.com/11385864/1881141
CSS3中的media媒體查詢
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
