CSS3中的media媒體查詢

媒體查詢多用於響應式網頁。

1.初始化設定：

在HTML檔案中，網頁頂部

標籤中插入一句話：

<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）時，將網頁背景色變為黑色：

螢幕寬度最小為960px（大於960px）時，將網頁背景色變為桔色：

@media screen and (max-width: 960px){
	body{
		background: #000;
	}
}

更為常見的是混合使用，如當螢幕寬度介於960px和1200px之間時，將網頁背景色變為黃色：

@media screen and (min-width:960px){
	body{
		background:orange;
	}
}

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:偵測裝置目前處於橫向還是縱向狀態，

  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文件中的标签中写入这句：

<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中的媒体查询才是目前的最佳方法。

更多CSS3中的media媒体查询相关文章请关注PHP中文网！