無標(biāo)題文章

響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)的理念是：集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境（系統(tǒng)平臺楔绞、屏幕尺寸辫狼、屏幕定向等）進(jìn)行相對應(yīng)的布局见秤。

中文名

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

外文名

Responsive Web design

理????念

相對應(yīng)的布局

技術(shù)手段

一切彈性化

概念

響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)的理念是：

頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸测摔、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成挟纱，包括彈性網(wǎng)格和布局紊服、圖片、CSS media query的使用等剂府。無論用戶正在使用筆記本還是iPad腺占，我們的頁面都應(yīng)該能夠自動切換分辨率、圖片尺寸及相關(guān)腳本功能等意鲸，以適應(yīng)不同設(shè)備读慎；換句話說夭委，頁面應(yīng)該有能力去自動響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁設(shè)計(jì)就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本慌烧。這樣屹蚊，我們就可以不必為不斷到來的新設(shè)備做專門的版本設(shè)計(jì)和開發(fā)了。

提出

編輯

Ethan Marcotte曾經(jīng)在A List Apart發(fā)表過一篇文章"Responsive Web Design"，文中援引了響應(yīng)式建筑設(shè)計(jì)的概念：現(xiàn)出現(xiàn)了一門新興的學(xué)科——"響應(yīng)式架構(gòu)(responsive architecture)"——提出，物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進(jìn)行響應(yīng)泞莉。結(jié)合嵌入式機(jī)器人技術(shù)以及可拉伸材料的應(yīng)用，建筑師們正在嘗試建造一種可以根據(jù)周圍人群的情況進(jìn)行彎曲挨厚、伸縮和擴(kuò)展的墻體結(jié)構(gòu)疫剃；還可以使用運(yùn)動傳感器配合氣候控制系統(tǒng)，調(diào)整室內(nèi)的溫度及環(huán)境光壤躲。已經(jīng)有公司在生產(chǎn)"智能玻璃"：當(dāng)室內(nèi)人數(shù)達(dá)到一定的閾值時(shí)役电，這種玻璃可以自動變?yōu)椴煌该鞣ㄉ_保隱私。

將這個思路延伸到Web設(shè)計(jì)的領(lǐng)域酥夭，我們就得到了一個全新的概念。為什么一定要為每個用戶群各自打造一套設(shè)計(jì)和開發(fā)方案讶隐？和響應(yīng)式建筑相似，Web設(shè)計(jì)同樣應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動響應(yīng)及調(diào)整炉峰。

顯然，我們無法也無需使用運(yùn)動傳感器或是機(jī)器人技術(shù)婆廊，響應(yīng)式Web設(shè)計(jì)更多需要的是抽象思維。好在列荔，一些相關(guān)的概念已經(jīng)得到了實(shí)踐砂吞，比如液態(tài)布局、幫助頁面重新格式化的media queries和腳本等概而。但是響應(yīng)式Web設(shè)計(jì)不僅僅是關(guān)于屏幕分辨率自適應(yīng)以及自動縮放的圖片等等赎瑰，它更像是一種對于設(shè)計(jì)的全新思維模式。

技術(shù)手段

編輯

一切彈性化：

我們通過響應(yīng)式的設(shè)計(jì)和開發(fā)思路讓頁面更加"彈性"了。圖片的尺寸可以被自動調(diào)整踩娘，頁面

液態(tài)圖片技術(shù)

布局再不會被破壞。雖然永遠(yuǎn)沒有最完美的解決方案，但它給了我們更多選擇习寸。無論用戶切換設(shè)備的屏幕定向方式胶惰，還是從臺式機(jī)屏幕轉(zhuǎn)到iPad上瀏覽，頁面都會真正的富有彈性霞溪。

通過液態(tài)網(wǎng)格和液態(tài)圖片技術(shù)孵滞，并且在正確的地方使用了正確的HTML標(biāo)記。

響應(yīng)式圖片：

響應(yīng)式圖片技術(shù)思想：不僅要同比的縮放圖片坊饶，還要在小設(shè)備上降低圖片自身的分辨率。這個技術(shù)的實(shí)現(xiàn)需要使用幾個相關(guān)文件殴蓬，我們可以在Github上獲取匿级。包括一個JavaScript文件(rwd-images.js)蟋滴，一個.htaccess文件，以及一些范例資源文件痘绎。大致的原理是津函，rwd-images.js會檢測當(dāng)前設(shè)備的屏幕分辨率，如果是大屏幕設(shè)備孤页，則向頁面head部分中添加BASE標(biāo)記尔苦，并將后續(xù)的圖片、腳本和樣式表加載請求定向到一個虛擬路徑"/rwd-router"行施。當(dāng)這些請求到達(dá)服務(wù)器端允坚，.htacces文件會決定這些請求所需要的是原始圖片還是小尺寸的"響應(yīng)式圖片"，并進(jìn)行相應(yīng)的反饋輸出蛾号。對于小屏幕的移動設(shè)備稠项，原始尺寸的大圖片永遠(yuǎn)不會被用到。

趨勢

編輯

響應(yīng)式設(shè)計(jì)在2012年被提的比較多须教，但是響應(yīng)式設(shè)計(jì)仍然在不斷變化皿渗，不斷創(chuàng)新。比如轻腺，新的設(shè)備不斷出來(iPad Mini)乐疆，這讓以前的設(shè)計(jì)想法土崩瓦解。而各種Web的響應(yīng)式設(shè)計(jì)也獲得了越來越多的注意贬养，“讓人們忘記設(shè)備尺寸”的理念將更快地驅(qū)動響應(yīng)式設(shè)計(jì)挤土，所以Web設(shè)計(jì)也將迎來更多的響應(yīng)式設(shè)計(jì)元素。

UIKit

UIkit是一個輕量級误算、模塊化的前端框架仰美，可快速構(gòu)建強(qiáng)大的web前端界面。它根據(jù)不同的屏幕分辨率與上網(wǎng)設(shè)備儿礼，會自動做出響應(yīng)咖杂，提供一致的體驗(yàn)。

Bootstrap

由兩個Twitter員工開發(fā)并開源的前端框架蚊夫，目前已經(jīng)更新到了v3.0版本诉字，在Github上非常火爆知纷，在國內(nèi)也有很多粉絲壤圃，值得一試。

Adobe Edge Inspect

對移動開發(fā)者尤其有用的工具琅轧，其前身是 Adobe Shadow伍绳，用于幫助設(shè)計(jì)師和開發(fā)者同時(shí)在多個移動設(shè)備上預(yù)覽應(yīng)用設(shè)計(jì)，發(fā)現(xiàn)和解決跨平臺問題乍桂。

Responsive Web Design Sketch Sheets

如果你還在用紙和筆來創(chuàng)建你的實(shí)體模型冲杀，你可以用這些現(xiàn)有的草圖來設(shè)計(jì)你的交互網(wǎng)站了效床。

Foundation

號稱是世界上最先進(jìn)的響應(yīng)式前端框架。

SimpleGrid

輕量級的響應(yīng)式 CSS 網(wǎng)格系統(tǒng)漠趁，讓你可以快速創(chuàng)建適應(yīng)于手機(jī)和平板電腦的網(wǎng)站扁凛。

Responsive Testing

這個工具可以讓你預(yù)覽你設(shè)計(jì)網(wǎng)頁在不同設(shè)備上的效果，只需要訪問它的網(wǎng)站并輸入你網(wǎng)站的地址就可以看到了闯传。

十大開發(fā)框架

編輯

Gumby Framework

Gumby 2是建立在Sass基礎(chǔ)上的谨朝。Sass是一款非常強(qiáng)大的CSS 預(yù)處理器，允許用戶自主快速的開發(fā)擴(kuò)展Gumby甥绿，同時(shí)提供很多新的工具來自定義和擴(kuò)展Gumby框架字币。Gumby 2是一個非常棒的響應(yīng)式CSS框架。

Get UI Kit

Get UI Kit是一款輕量級共缕、模塊化的前端框架洗出，可快速構(gòu)建強(qiáng)大的web前端界面，而且图谷，它是一款開源的前端UI界面的框架翩活，可以無任何限制的使用UIKit 來創(chuàng)建自己的風(fēng)格。

Foundation

Foundation是一個易用便贵、強(qiáng)大而且靈活的框架菠镇，用于構(gòu)建基于任何設(shè)備上的Web應(yīng)用。提供多種Web上的UI 組件承璃，如表單利耍、按鈕、標(biāo)簽等盔粹。

Semantic

UI是Web的靈魂隘梨！Semantic是為工程師而制作的可復(fù)用的開源前端框架。提供各種UI組件舷嗡，使得開發(fā)更加直觀轴猎、易于理解。

52Framework

52 Framework主要用于優(yōu)化HTML5和CSS3的跨瀏覽器兼容性的框架进萄，可在所有主流瀏覽器上運(yùn)行税稼。

PureCSS

Pure是一組小的、響應(yīng)式CSS模塊垮斯，可用于任意Web項(xiàng)目中。它可作為每個網(wǎng)站或Web應(yīng)用的起步工具只祠，幫助開發(fā)者處理應(yīng)用程序所需的所有CSS工作兜蠕，同時(shí)不會讓每個應(yīng)用千篇一律。

Responsablecss

Responsable使用最少的Sass抛寝，帶給你最完美的響應(yīng)式框架熊杨。

TukTuk

TukTuk支持代碼重用功能曙旭，提供更加快速、高效的樣式列表晶府，易于添加與維護(hù)桂躏。

Kube

Kube是全球最為流行、最靈活的CSS框架之一川陆。其帶給你最強(qiáng)大的功能選擇剂习，極具創(chuàng)意性與美觀性。

Ivory

Ivory是一款強(qiáng)大较沪、靈活鳞绕、易用的響應(yīng)式框架。 Ivory基于12列的響應(yīng)式網(wǎng)格布局尸曼，包含表格们何，按鈕，表格控轿，分頁冤竹，撥動開關(guān)，工具提示茬射，手風(fēng)琴鹦蠕，選項(xiàng)卡等網(wǎng)站中常用的組件和樣式。[1]

應(yīng)用到瀏覽器

編輯

1. 測試主流表格因素和瀏覽器

如今客戶不僅僅使用iPhone和筆記本躲株，而且使用iMac的27英寸顯示器片部，10英寸的Kindle和很多平板設(shè)備。這些設(shè)備可能會使用不同的瀏覽器霜定，并且每種表格因素和瀏覽器的組合都可能導(dǎo)致不同的頁面渲染档悠。并且這些行為可能在每個版本上都不太一樣。

好消息是瀏覽器是免費(fèi)的望浩。如果你使用Windows平臺辖所，可以很容易地安裝主流瀏覽器—Internet Explorer、Chrome磨德、Firefox—然后可以使用免費(fèi)工具缘回，比如Browsershots，或者付費(fèi)工具典挑，比如CrossBrowserTesting酥宴，來檢查網(wǎng)頁在Safari上的外觀。如果你使用的是Mac您觉，可以安裝除了Internet Explorer（IE）之外的所有瀏覽器 -- 但是可以從Modern.ie上下載IE特定的虛擬機(jī)拙寡，從而輕松得到幾乎所有版本的IE。

這時(shí)琳水，“測試”工作主要是去查看網(wǎng)頁是否渲染正確肆糕，瀏覽所有的可選項(xiàng)般堆，驗(yàn)證動態(tài)內(nèi)容是否能正常加載，看上去是否奇怪诚啃，并且執(zhí)行并驗(yàn)證程序主邏輯淮摔。如果是房屋抵押應(yīng)用程序，那么就去嘗試新建一個抵押始赎。如果是文字處理程序和橙，就嘗試創(chuàng)建一個文檔——并且在測試過程中檢查用戶界面。

我們也提到了平臺极阅。需要找出軟件主要的使用者是誰胃碾。對于內(nèi)部軟件，用戶很可能會使用筆記本筋搏，手機(jī)（Android和iOS）仆百，或者平板。建議購買每種主要類型的機(jī)器作為測試機(jī)型奔脐，這些費(fèi)用相比整體開發(fā)成本而言應(yīng)該非常小俄周。當(dāng)測試團(tuán)隊(duì)等待所需的特定移動設(shè)備時(shí)，開發(fā)團(tuán)隊(duì)很可能愿意分享他們的手機(jī)和平板髓迎。

最后峦朗，考慮是否需要支持舊的瀏覽器，可能是為了公司客戶排龄，并且在這些設(shè)備上做程序主邏輯測試波势。

在此期間，可能會發(fā)現(xiàn)可用性問題橄维，第一個圖片顯示的地方不合適尺铣，或者頁面“感覺”很奇怪。將這些發(fā)現(xiàn)分享給團(tuán)隊(duì)争舞。這可能不是個bug凛忿，但也可能是。

2. 改變?yōu)g覽器大小

基于“響應(yīng)式內(nèi)容”的本質(zhì)竞川，頁面應(yīng)該在任何合理屏幕大小的設(shè)備上看上去都很舒服店溢，從300*300的手機(jī)到2550*1600像素的顯示器。最快最方便的評估響應(yīng)式功能的方式是大幅改變?yōu)g覽器的大小委乌，檢查顯示情況床牧。

對于這類測試不需要任何搭建時(shí)間。只需要打開網(wǎng)頁遭贸，點(diǎn)擊瀏覽器的右上角叠赦，拖拽到所需的大小。文本是否在你認(rèn)為應(yīng)該在的位置，是否仍然可讀除秀？圖像是否能合理伸縮？控件是否還在頁面上——按鈕算利，文本輸入框册踩，日期控件和其他的——是否仍然可用？它們有沒有遮蓋掉其他重要的內(nèi)容效拭？

危險(xiǎn)之處是你發(fā)現(xiàn)了一個bug暂吉，可能很難重現(xiàn)，產(chǎn)品經(jīng)理會說“沒有人會這么快地改變?yōu)g覽器尺寸缎患，把它拖拽到整個顯示器上慕的，如果他們真這么做了，那么應(yīng)該告訴他們不要這么做挤渔“菇郑”你可能會發(fā)現(xiàn)一堆bug，卻無法說服開發(fā)人員修復(fù)它們判导。記准蹈浮：說不定就有一種平板設(shè)備有這樣的屏幕分辨率。

最新的IE和Chrome版本有工具可以幫助調(diào)整瀏覽器尺寸到需要的合適大小眼刃，比如移動手機(jī)或者平板绕辖。如果你在快速改變?yōu)g覽器大小時(shí)發(fā)現(xiàn)了一個很難重現(xiàn)的bug，但是可以在一些擁有正常大小的設(shè)備上重現(xiàn)這個問題擂红，那么你可能就有了需要修復(fù)這個問題的有力根據(jù)仪际。

3. 移動設(shè)備和旋轉(zhuǎn)

移動設(shè)備使得響應(yīng)式網(wǎng)頁設(shè)計(jì)變得如此重要。移動設(shè)備也給響應(yīng)性帶來了一個新的要求：旋轉(zhuǎn)昵骤。這些小型設(shè)備會跟著主人去任何地方树碱。這些設(shè)備也可以隨意旋轉(zhuǎn)，從縱向到橫向再轉(zhuǎn)回來涉茧。這似乎和改變大小很類似赴恨。但是實(shí)際上設(shè)備的每次旋轉(zhuǎn)之后，網(wǎng)頁都需要重新渲染伴栓。

一些應(yīng)用在改變大小時(shí)可能會改變自身行為 -- 比如伦连，iOS7的計(jì)算器，在IPhone4的縱向模式下會隱藏科學(xué)計(jì)算選項(xiàng)钳垮。

4. 響應(yīng)式檢查

響應(yīng)式檢查點(diǎn)的所有描述在網(wǎng)上都可以找到惑淳。其中的一些很簡單，告訴你在不同的瀏覽器尺寸下網(wǎng)頁看上去的樣子饺窿。更多復(fù)雜的選項(xiàng)歧焦，比如BrowserStack，模擬一系列可能的屏幕尺寸和橫向縱向模式切換能力的組合。這樣的可配置性和模擬尺寸交互的組合可以幫助創(chuàng)建強(qiáng)大的響應(yīng)式測試環(huán)境绢馍。

這是ami.responsivedesign.is上的簡單圖片向瓷，以某個真實(shí)網(wǎng)頁的URL為輸入，將其在五種不同的設(shè)備上加以渲染舰涌。ami.responsivedesign.is網(wǎng)頁不是將其當(dāng)做靜態(tài)圖片加以渲染猖任，圖片上的滾動欄可以上下滾動。[2]

十五大測試工具

編輯

1.ProtoFluid 4

ProtoFluid簡化了液態(tài)布局的開發(fā)瓷耙，能夠適應(yīng)CSS和響應(yīng)式設(shè)計(jì)朱躺，能夠構(gòu)建出精準(zhǔn)、動態(tài)的視角搁痛。開發(fā)者可免費(fèi)使用ProtoFluid长搀，并且還允許開發(fā)者使用其它擴(kuò)展工具，比如FireBug鸡典。

2.Viewport Resizer

Viewport Resizer是一款基于瀏覽器的測試工具源请，它能夠測試任何網(wǎng)站的響應(yīng)能力。用戶只需把網(wǎng)頁拖入書簽轿钠，然后點(diǎn)擊需要測試的網(wǎng)頁即可檢查頁面的屏幕分辨率巢钓。此外，Viewport Resizer自帶的分辨率尺寸不一定能夠滿足你的需求疗垛，所以症汹，用戶還可以自定義添加其它類型的屏幕尺寸。

3.Responsive.IS

用戶只需輸入要測試的網(wǎng)址贷腕，即會根據(jù)你所選的設(shè)備自動改變網(wǎng)頁的大小背镇。

4.Respondr

Respondr是一款輕量級、非常方便小巧的工具泽裳，用戶只需輸入網(wǎng)頁的URL瞒斩，然后選擇你所要測試的設(shè)備，如iPhone涮总、iPad胸囱、桌面瀏覽器等，即可看到網(wǎng)頁在不同平臺上的顯示效果瀑梗。

5.Froont

Froont是一款基于Web的設(shè)計(jì)工具烹笔，不需要程序員介入的設(shè)計(jì)編程工具，為設(shè)計(jì)師們提供了可視化的在線網(wǎng)頁設(shè)計(jì)環(huán)境抛丽。

6.Responsivepx

Responsivepx 是一個功能簡單谤职、但卻很方便實(shí)用的測試工具，可以測試網(wǎng)頁在不同尺寸的顯示器上所呈現(xiàn)的效果亿鲜。此外允蜈，Responsivepx 能讓你自行調(diào)整要顯示的尺寸長寬px值。用戶即可在線使用，也可以在本地上對網(wǎng)頁進(jìn)行測試饶套。

7.Responsive

Responsive可以讓你看到測試網(wǎng)站在同一個屏幕上顯示不同分辨率下的效果漩蟆，不需要切換到不同的模式。

8.Screenfly

Screenfly是一款免費(fèi)的測試工具凤跑，可以用來測試不同客戶端下（不同顯示器或者移動設(shè)備）網(wǎng)站的顯示狀況爆安。

9.Review.js

Review.js是一個動態(tài)的viewport系統(tǒng)，提供高效的響應(yīng)式網(wǎng)頁瀏覽選擇仔引。它是一個純JavaScript實(shí)現(xiàn)的類庫，更少的請求使得它對寬帶的要求更少褐奥，支持插件式的擴(kuò)展咖耘，并且可以支持自定義窗口改變事件。此外撬码，該系統(tǒng)還提供了‘Opt-In’和‘Opt-Out’響應(yīng)式設(shè)計(jì)狀態(tài)儿倒。

10.Responsinator

Responsinator提供了仿真的Web界面來測試你的響應(yīng)式設(shè)計(jì)，提供了iPhone呜笑，Android夫否，iPad，Kindle及其多種設(shè)備上的預(yù)覽效果叫胁，你可以方便地看到需要支持的設(shè)備的響應(yīng)式設(shè)計(jì)效果圖凰慈。

11.resizeMyBrowser

resizeMyBrowser是一個響應(yīng)式網(wǎng)頁設(shè)計(jì)工具，允許你選擇需要測試的瀏覽器尺寸驼鹅。用戶可以在15種不同的預(yù)設(shè)尺寸中選擇或輸入自定義的尺寸微谓。

12.Responsive Design Bookmarklet

Responsive Design Bookmarklet是一款響應(yīng)式設(shè)計(jì)測試工具，用戶需要把網(wǎng)頁拖拽到書簽上方的書簽欄输钩，瀏覽器即會自動應(yīng)用豺型。用戶可以查看網(wǎng)頁在不同設(shè)備上的預(yù)覽效果。

13.Adobe Edge Inspect CC

Adobe Edge可以讓你在設(shè)備上預(yù)覽和檢查響應(yīng)式網(wǎng)站买乃。

14.I am mobile

I am mobile可以測試網(wǎng)頁在各種不同窗口上的顯示效果姻氨，并且還會給出一些建議，讓你的網(wǎng)站更具移動友好性剪验。

15.Retina Images

Retina Images主要用來測試圖片在不同的設(shè)備上的顯示情況肴焊，這樣有利于用戶在開發(fā)出高清晰度的圖片。此外碉咆，你無需更改任何img標(biāo)簽抖韩，并且Retina Images安裝也十分方便。[3]

參考資料

1.十大響應(yīng)式Web設(shè)計(jì)框架．TechTarget[引用日期2015-10-26]