自適應(yīng)網(wǎng)頁設(shè)計(jì)近來很流行，如果你接觸比較少請參見 responsive sites。當(dāng)然，對一個新手來說可能聽起來有點(diǎn)復(fù)雜，其實(shí)它比你想象的簡單多了。這里是一個快速教程，通過學(xué)習(xí)你會自適應(yīng)網(wǎng)頁和media queries的基本原理（前提你有css基礎(chǔ)）。

查看演示 Demo

Step 1：Meta 標(biāo)簽

為了適應(yīng)屏幕，不少移動瀏覽器都會把HTML頁面置于較大視口寬度（一般會大于屏幕寬度），你可以使用viewport meta標(biāo)簽來設(shè)定。以下viewport meta標(biāo)簽告訴瀏覽器視口寬度等于設(shè)備屏幕寬度，且不進(jìn)行初始縮放：

IE8及其更低版本不支持media query，可以使用media-queries.js或respond.js腳本實(shí)現(xiàn)支持。

Step 2. HTML結(jié)構(gòu)

在這個例子中，頁面布局包括 header，content，sidebar和
footer。header固定高度為180px，content寬600px，sidebar寬300px。

Step 3. Media Queries

CSS3 media query是自適應(yīng)網(wǎng)頁設(shè)計(jì)的關(guān)鍵，他就像高級語言里的if條件語句，告訴瀏覽器根據(jù)不同的視口寬度（這里等于瀏覽器寬度）來渲染網(wǎng)頁。

如果視口寬度小于等于980px，下面規(guī)則生效。

這里將容器絕對寬度改用百分比顯示，讓頁面排版更加靈活。

/* for 980px or less */
@media screen and (max-width: 980px) {

	#pagewrap{
		width: 94%;
	}
	#content{
		width: 65%;
	}
	#sidebar{
		width: 30%;
	}

}

如果視口寬度小于等于700px， 將#content和#sidebar寬度設(shè)為自動(auto)，并移除它的浮動屬性(float)，這樣它會變成滿版顯示。

/* for 700px or less */
@media screen and (max-width:700px) {

	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		width: auto;
		float: none;
	}

}

當(dāng)視口寬度小于等于480px時(shí)（如手機(jī)屏幕），將#header高度設(shè)為自動，h1的字體大小設(shè)定為24px，并隱藏#sidebar。

/* for 480px or less */
@media screen and (max-width:480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}
	#sidebar {
		display: none;
	}

}