CSS3中的media媒體查詢-css教學-PHP中文網

首頁

web前端

css教學

CSS3中的media媒體查詢

高洛峰

Feb 17, 2017 pm 01:11 PM

css3media

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

1.初始化設定：

在HTML檔案中，網頁頂部

標籤中插入一句話：

<meta>

這句話在於對響應式網頁做一個初始化設置，主要包括：

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>

當然還有一個更給力的寫法：

<meta>

這段程式碼後面加了一個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媒體查詢所有參數摘要：

媒體查詢器中也包含不常用的相關功能，悉如示下：