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

這個(gè)話(huà)題最近很火爆，圖趣也一直在關(guān)注，上篇文章剛和大家分享了，ipad3高分辨率屏幕的利與弊分析；響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)和移動(dòng)互聯(lián)網(wǎng)密切相關(guān)，并因移動(dòng)終端的豐富和普及而興盛，并且是一個(gè)頗具爭(zhēng)議的話(huà)題，我今天將和大家探討下。

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

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

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

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

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

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

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

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

這樣勢(shì)必就要增加很多的工作量，而且很多還是重復(fù)的。

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

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

let the browser flow…

怎么做？

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

media query(媒體查詢(xún))

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

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

后面的initial-scale表示初始縮放，maximum-scale表示最大縮放比例，1意味著不能進(jìn)行縮放。

					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

					/* 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{
    }
}

當(dāng)然依靠屏幕寬度來(lái)進(jìn)行適配是最簡(jiǎn)單的方法，media query有很多參數(shù)可以使用比如orientation、aspect-ratio等，不太了解的可以查看這篇詳細(xì)的介紹。

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

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

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

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

flex box

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

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

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

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

					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

					.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代碼：

					1
2
3
4
5
6
7
8
9
10
11
12

					<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.qianduan.net/about" title="關(guān)于我們">關(guān)于我們</a>
		<a href="http://www.qianduan.net/copyright" title="版權(quán)聲明">版權(quán)聲明</a>
		<a href="http://www.qianduan.net/sitemap" title="網(wǎng)站地圖">網(wǎng)站地圖</a>
	</div>
</div>

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

不足之處

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

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

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

HTML5本地存儲(chǔ)

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

					1
2
3
4
5
6
7
8
9
10

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

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

		<html manifest="responsive.manifest">

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

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

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

這樣做的好處是顯而易見(jiàn)的，移動(dòng)終端不會(huì)加載多余的資源，也不會(huì)因?yàn)镻C端的樣式而重繪頁(yè)面，同時(shí)也不會(huì)影響PC端的表現(xiàn)。

流體圖片(fluid image)

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

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

		img{max-width:100%}

嗯，這里的前提是，沒(méi)有給img標(biāo)簽設(shè)置寬度和高度，否則顯示會(huì)有問(wèn)題。另外不建議直接設(shè)置width=”100%”，因?yàn)闀?huì)把小圖拉大，模糊顯示。

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

CSS3 image

這個(gè)方法有些驚艷

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

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

然后用media query來(lái)動(dòng)態(tài)賦值：

					1
2
3
4
5
6
7
8
9
10

					@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);
	}
}

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

pre標(biāo)簽

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

右邊的文字被隱藏掉了。

解決方法很簡(jiǎn)單：

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

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

嗯，主要的技術(shù)和技巧其實(shí)就這些，大家不會(huì)陌生。下面是一些比較有用的工具什么的：

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)工具與資源

國(guó)外在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)上已經(jīng)走的很遠(yuǎn)了，已經(jīng)有很多工具和資源供我們參考和使用：

CSS 框架

• 320 and Up
• Mobile Boilerplate
• Golden Grid System
• Gridless
• Less Framework
• 1140 CSS Grid System
• Fluid 960 Grid System
• SimpleGrid
• Skeleton

實(shí)用工具

• Respond.js，讓IE6-8支持meidia query
• Responsive Design Testing 簡(jiǎn)單而方便的測(cè)試網(wǎng)站的響應(yīng)性的工具，輸入網(wǎng)址即可看到網(wǎng)站在不同分辨率下的表現(xiàn)
• Resize My Browser 縮放瀏覽器工具，不過(guò)不支持chrome和opera瀏覽器
• Media Query Bookmarklet 顧名思義，這是一個(gè)關(guān)于media query的書(shū)簽工具
• ProtoFluid 在線(xiàn)查看和調(diào)試網(wǎng)站對(duì)移動(dòng)終端兼容性的工具，很贊
• ScreenFly 和ProtoFluid類(lèi)似
• responsivepx 更直觀的測(cè)試網(wǎng)站對(duì)不同分辨率的適配性

爭(zhēng)論和總結(jié)

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)被提出以來(lái)，爭(zhēng)論就不斷，其實(shí)核心問(wèn)題只有兩個(gè)個(gè)：太多的資源請(qǐng)求和有限的終端支持之間的矛盾、響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)和移動(dòng)終端在用戶(hù)體驗(yàn)和視覺(jué)風(fēng)格上的差異。前者不能容忍在弱小的手機(jī)/平板上通過(guò)龜速的3G/2G網(wǎng)絡(luò)來(lái)加載一個(gè)笨重的PC端頁(yè)面，而后者糾結(jié)響應(yīng)式網(wǎng)站不像手機(jī)網(wǎng)站。

我的想法是，具體問(wèn)題具體分析，比如，強(qiáng)內(nèi)容的網(wǎng)站，完全可以嘗試響應(yīng)式網(wǎng)站，而重視覺(jué)和功能的網(wǎng)站，則可以嘗試建立一個(gè)獨(dú)立的移動(dòng)網(wǎng)站。

另外，顯然，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的大部分技術(shù)，是可以用在WebApp開(kāi)發(fā)中的。

最后，歡迎各種吐槽、各種批評(píng)、各種建議、各種發(fā)散、以及各種新觀點(diǎn)新技術(shù)～～歡迎發(fā)表評(píng)論～～

PS：如果你手上有android/iPhone，可以直接訪(fǎng)問(wèn)下前端觀察。 :)

參考文章：

• Responsive Web Design Techniques, Tools and Design Strategies
• Responsive Web Design
• The ultimate responsive web design roundup