這個話題最近很火爆，易勢也一直在關(guān)注，響應(yīng)式網(wǎng)頁設(shè)計和移動互聯(lián)網(wǎng)密切相關(guān)，并因移動終端的豐富和普及而興盛，并且是一個頗具爭議的話題，我今天將和大家探討下。

移動互聯(lián)網(wǎng)的現(xiàn)狀和未來

在說到這個話題前，我們先看下網(wǎng)頁設(shè)計和前端開發(fā)的現(xiàn)狀：

• 1、全球有超過53億手機用戶（包括傳統(tǒng)手機）
• 2、國內(nèi)3G用戶超過1億
• 3、iPhone4手機在2010年出貨量超過3000萬部；
• 4、iPhone 4S上市前3天賣掉400萬部；
• 5、Android手機每天激活超過50萬部；
• 6、iPad出貨量已經(jīng)超過2.5億部；
• 7、預計到2015年，移動互聯(lián)網(wǎng)的數(shù)據(jù)流量將超越桌面端的流量
• 。。。

嗯，大家也許已經(jīng)開始注意到，自己和身邊的朋友也都越來越多的用上了iPhone或者android手機或平板——一兩年前我們預料的移動互聯(lián)網(wǎng)時代即將來臨，現(xiàn)在已然實現(xiàn)了——我們正處在移動互聯(lián)網(wǎng)快速發(fā)展的時代——已經(jīng)不再是起步階段了。

那么，什么是響應(yīng)式網(wǎng)頁設(shè)計？

響應(yīng)式網(wǎng)頁設(shè)計是Ethan Marcotte在去年5月份提出的一個概念，簡而言之，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念可以說是是為移動互聯(lián)網(wǎng)而生的！

或許大家之前會注意到，有很多知名網(wǎng)站都推出了iPhone或針對智能手機的專門網(wǎng)站，比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端觀察之前也嘗試過用wordpress插件實現(xiàn)m.qianduan.net的移動網(wǎng)站。

那么問題就來了——我們要為每一個設(shè)備做一個單獨的網(wǎng)站嗎？來讓網(wǎng)站在每個設(shè)備中得到相應(yīng)的視覺風格和操作體驗？

這樣勢必就要增加很多的工作量，而且很多還是重復的。

我們在做頁面的時候，一般很強調(diào)模塊化的概念，我們要求一個合格的模塊要能夠“可擴展、無侵染”，它要能夠用在任何地方都能夠正常的顯示。響應(yīng)式網(wǎng)頁設(shè)計與此類似——網(wǎng)站在任何設(shè)備中都能夠正常適配，而不用為每個設(shè)備單獨做個子網(wǎng)站！

但是，產(chǎn)品經(jīng)理和設(shè)計師可能還是會要求網(wǎng)站在各個瀏覽器里面表現(xiàn)要一模一樣，甚至要像素還原——WTF！不同的瀏覽器本身的功能、行為和處理方式都不一樣，為什么要表現(xiàn)完全一樣？！

怎么做？

其實響應(yīng)式網(wǎng)頁的實現(xiàn)很簡單，都是大家熟悉的技術(shù)。

media query(媒體查詢)

因為現(xiàn)在主流的智能終端都是基于iOS和Android的，而它們自帶的瀏覽器都是基于webkit內(nèi)核，所以我們可以完全使用viewport屬性和media query技術(shù)實現(xiàn)網(wǎng)站的響應(yīng)性：

	<meta name="viewport" 
content="width=device-width, initial-scale=1, maximum-scale=1">

					/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}
 
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}
 
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

 當然依靠屏幕寬度來進行適配是最簡單的方法，media query有很多參數(shù)可以使用比如orientation、aspect-ratio等。

其實，media query是響應(yīng)式網(wǎng)頁設(shè)計中被用到最多的技術(shù)。

fluid grid(流體網(wǎng)格)

很多項目都在使用網(wǎng)格技術(shù)(或者叫柵格)，前幾年960.gs很流行，但是隨著屏幕分辨率的普遍提升，它已經(jīng)不太適合當前需求了，于是最近幾年fluid grid開始逐漸多了起來，這種技術(shù)其實也很簡單，只是將格柵的單位由px變成%，用百分比來控制頁面每列的寬度，從而實現(xiàn)寬度的自適應(yīng)。

使用流體網(wǎng)格的網(wǎng)站能夠根據(jù)屏幕寬度自動調(diào)整頁面中每列的寬度，從而保證頁面的完整展現(xiàn)和基本功能。這也是一種不錯的方法。

flex box

flex box是css3中的新技術(shù)，它很強大，可以實現(xiàn)很多我們之前無法想象的自適應(yīng)布局。

有時我們希望網(wǎng)站能夠以webapp的外觀呈現(xiàn)給手機用戶，flexbox是個不二的選擇。

比如，要實現(xiàn)這樣的簡單結(jié)構(gòu)：

它很像一個app的結(jié)構(gòu)，頭部和底部固定，中間高度自適應(yīng)，用flexbox可以簡單實現(xiàn)：

				.flex_wrap{
	height:100%;
	display: box;  
	display: -moz-box;  
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;
}
.flex_bd{
	box-flex: 1;
	-moz-box-flex: 1; 
	-webkit-box-flex:1;
	background:#E7E7E7;
	overflow-y:auto;
}
.flex_hd{
	background:#16364C;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	font-weight:700;
	font-family:14px;
}
.flex_ft{
	background:green;
	height:30px;
	line-height:30px;
	text-align:right;
}

HTML代碼： 

				<div class="flex_wrap">
<div class="flex_hd">前端觀察</div>
<div class="flex_bd">
	<p>這里是主內(nèi)容區(qū)</p>
	<p>這里是主內(nèi)容區(qū)</p>
</div>
<div class="flex_ft">
	<a href="http://www.huaianlvs.cn/web-company/" title="關(guān)于我們">關(guān)于我們</a>
	<a href="http://www.huaianlvs.cn/web-showcase/" title="網(wǎng)站案例">網(wǎng)站案例</a>
</div>
</div>

雖然這里還會有點兒問題，比如主內(nèi)容區(qū)域內(nèi)容太多會被隱藏掉，因為android webkit和iOS 5之前的mobile safari均不支持overflow:scroll屬性，但是這個問題還是很好解決的，比如在里面嵌套一個子容器，用js來給定個高度并使用定位來實現(xiàn)滾動條從而完整展示內(nèi)容，或者直接使用iscroll等js庫來實現(xiàn)。好消息是，iOS5中safari開始支持overflow:scroll了。

不足之處

如果你關(guān)注網(wǎng)站性能之類的話，可能已經(jīng)發(fā)現(xiàn)了一些問題：

• 1、加載很多不需要的資源，比如多余的圖片和樣式內(nèi)容
• 2、帶寬限制
• 3、移動終端的內(nèi)存和CPU限制
• 4、圖片大小和屏幕大小不匹配

任何一個方案都不是完美的，但也不會很糟糕。下面我們會提到一些可行的優(yōu)化方案：

HTML5本地存儲

對于支持HTML5 appcache /manifest特性的瀏覽器，我們可以將一些不常改動的靜態(tài)資源存儲到本地，比如css文件，css中用到的圖片，以及一些js文件等：

					CACHE MANIFEST
NETWORK:
/*
 
CACHE:
img/bg.jpg
img/days.otf
slideshow.js
slideshow.css
classList.js

然后將文件保存為manifest格式，并在HTML標簽中引入即可：

		<html manifest="responsive.manifest">

這樣，用戶在第一次訪問的時候會慢一點兒，但是后續(xù)訪問會很快，3G網(wǎng)絡(luò)中也能為用戶節(jié)省帶寬。

移動設(shè)備優(yōu)先

一種新的設(shè)計流程是，先為移動設(shè)備設(shè)計界面，然后將PC端作為一個擴展。

這樣做的好處是顯而易見的，移動終端不會加載多余的資源，也不會因為PC端的樣式而重繪頁面，同時也不會影響PC端的表現(xiàn)。

流體圖片(fluid image)

頁面中的圖片有時會比手機/平板的屏幕（viewport）寬，這樣會將頁面容器撐開，但是移動瀏覽器又不能scroll，結(jié)果圖片被切掉一部分，然后還會有一部分內(nèi)容被隱藏掉，用戶看不到。

解決這個問題的方法很簡單，將img的最大寬度設(shè)置成100%就可以了：

		img{max-width:100%}

嗯，這里的前提是，沒有給img標簽設(shè)置寬度和高度，否則顯示會有問題。另外不建議直接設(shè)置width=”100%”，因為會把小圖拉大，模糊顯示。

同理，video標簽和iframe標簽的寬度也可以這樣做，而且最好不要使用iframe，寬度是個問題，性能也是一個方面吧。

CSS3 image

這個方法有些驚艷

我們都知道可以用::before和::after偽元素+content屬性來動態(tài)顯示一些內(nèi)容或者做其它很酷的事情，而且在CSS 2.1中即被支持。不過content屬性在CSS 2.1中只能用于這兩個偽元素中，而在CSS3中，任何元素都可以使用content屬性了，這個方法就是結(jié)合css3 的attr屬性和HTML自定義屬性的功能：

		<img src="image.jpg" data-src-600px="image-600px.jpg" 
data-src-800px="image-800px.jpg" alt="">

然后用media query來動態(tài)賦值：

					@media (min-device-width:600px) { 
	img[data-src-600px] {
		content: attr(data-src-600px, url); 
	}
}
@media (min-device-width:800px) {
	img[data-src-800px] {
		content: attr(data-src-800px, url);
	}
}

當然，這種方法也有不足之處，比如PC端寬屏幕需要加載兩個圖片文件，然后我們也要為此準備多張圖片文件等。

pre標簽

有的網(wǎng)站，比如，像前端觀察這樣的技術(shù)博客，會用pre來顯示源代碼，而瀏覽器對pre標簽?zāi)J設(shè)置white-space:pre，這樣，代碼就不會換行，從而撐開子容器，造成內(nèi)容被隱藏的問題：

右邊的文字被隱藏掉了。

解決方法很簡單：

		pre{
	white-space:pre-wrap
	word-wrap: break-word;
	word-break: break-all;/*如果要兼容IE，可以加上這句，連續(xù)字母斷行的問題傷不起啊。。。。*/
}

當然，不只是pre標簽，關(guān)鍵是white-space和word-break屬性的值。

主要的技術(shù)和技巧其實就這些。