Ethan Marcotte稱響應(yīng)式設(shè)計(jì)是基于網(wǎng)格建立一個(gè)網(wǎng)站。Marcotte定義這項(xiàng)技術(shù)后，響應(yīng)式設(shè)計(jì)框架開始出現(xiàn)，主要是css和JavaScript的結(jié)合。許多框架都是開源的，可以免費(fèi)下載和快速定制。

當(dāng)下最火熱的框架就是Bootstrap和 Foundation了。

隨著響應(yīng)式設(shè)計(jì)框架越來(lái)越火，一個(gè)巨大的爭(zhēng)議出現(xiàn)了：為什么一個(gè)專業(yè)的設(shè)計(jì)師還需要用這些框架呢？

許多人宣稱響應(yīng)式框架是可怕的，因?yàn)樗麄兏静欢稽c(diǎn)點(diǎn)html和css的知識(shí)。下面是另一些具有標(biāo)志性的反對(duì)使用框架的意見：

設(shè)計(jì)師可以寫自己的框架，如果他們懂得一點(diǎn)點(diǎn)html和css的知識(shí)的話就更應(yīng)該自己寫。

基于框架的網(wǎng)站加載非常慢。
基于框架的網(wǎng)站看起來(lái)大同小異。
伴隨多余的div標(biāo)簽，5000+行的css后者更多的javascript文件，網(wǎng)站膨脹是常見的。

盡管反對(duì)者的抗議很強(qiáng)烈，但是絲毫不影響框架的持續(xù)流行。我認(rèn)為框架是有用的，即使是最有經(jīng)驗(yàn)的web前端開發(fā)人員也可以好好研究一下。下面我將說(shuō)說(shuō)我支持框架的原因。

Paul-rand

一、響應(yīng)式設(shè)計(jì)框架

一天早上，我正在看 Eli White在 Northeast PHP Conference上的的關(guān)鍵演示，他是譯文PHP開發(fā)人員，他所談到的是web和PHP在過(guò)去20年的發(fā)展。他說(shuō)道一點(diǎn)：在15年前，后臺(tái)開發(fā)者構(gòu)建一切東西都是從零開始的。那個(gè)時(shí)候沒有多少可用的開源資源，也沒有專門的內(nèi)容管理系統(tǒng)（CMS）或者數(shù)十萬(wàn)美元的成本。如果你想要為你的網(wǎng)站做一個(gè)概觀，那么你需要從頭自己編寫一個(gè)。

而如今在2014年，后臺(tái)開發(fā)者不再這樣做了?，F(xiàn)在他們可以用SurveyMonkey的API在10個(gè)小時(shí)內(nèi)為用戶創(chuàng)建內(nèi)容，已經(jīng)不再是100或者1000小時(shí)了。是SurveyMonkey的代碼比較可怕嗎？它們是高效、最巧妙的嗎？我不是一個(gè)PHP開發(fā)者，我不知道這個(gè)問題的答案，但是這個(gè)API不斷被測(cè)試和debug，它運(yùn)行良好，早就可以拿來(lái)用在你其他的項(xiàng)目上，這就是它的價(jià)值所在。

White說(shuō)道，除非你的客戶想要的東西非常的特殊并且有足夠的資金支持，不然大多數(shù)的PHP開發(fā)人員沒有理由在2014年還親手從頭編寫自己的概觀。

So~有什么可以等價(jià)于快捷的網(wǎng)站前端技術(shù)呢？不幸的是我們沒有。

目前我們有兩個(gè)選擇來(lái)創(chuàng)建一個(gè)網(wǎng)站前臺(tái)。第一個(gè)選擇是下載一個(gè)主題（或者模板）。通常都是用于基于CMS的網(wǎng)站，一套主題可能會(huì)提供一些顏色的選擇和一些變量的調(diào)整。另外一方面，相對(duì)于整個(gè)網(wǎng)站的成本來(lái)說(shuō)，一套主題大多數(shù)都是免費(fèi)的或者是低成本的。下載一套主題，改一下顏色換一個(gè)logo是非常簡(jiǎn)單的事情。

更重要的是，一套好的主題是會(huì)定期更新的。并且會(huì)附帶說(shuō)明文檔使修改顯得很直觀容易。在消極方面呢，一套主題可能會(huì)被很多人使用，看起來(lái)并不是非常的新穎獨(dú)特，更像是屬于特定的內(nèi)容管理系統(tǒng)。

另外一個(gè)選擇就是自主完全定制解決方案。需要雇請(qǐng)?jiān)O(shè)計(jì)師來(lái)討論品牌方案，他們會(huì)經(jīng)歷再三設(shè)計(jì)和多次修改，或許會(huì)直接把原型實(shí)現(xiàn)到瀏覽器上，或者把設(shè)計(jì)稿用html和css實(shí)現(xiàn)到網(wǎng)站上，使用CMS集成設(shè)計(jì)，考慮要不要使用后臺(tái)管理，最后交付給客戶好的成品。另一方面，每個(gè)標(biāo)簽都被精確放置，和代碼是完全互相輝映的，沒有絲毫的冗余標(biāo)簽。

但是，為了實(shí)現(xiàn)這一點(diǎn)，開發(fā)者們必須做到訓(xùn)練有素經(jīng)驗(yàn)豐富。一旦這樣高水準(zhǔn)的成員加入進(jìn)來(lái)，項(xiàng)目?jī)r(jià)格就會(huì)直線上升，項(xiàng)目已經(jīng)從小客戶目標(biāo)移位到大客戶目標(biāo)，成本高升。此外，除非花費(fèi)額外的費(fèi)用在寫文檔上，不然一旦初始成員離開，那么新來(lái)的成員就必須從新看一遍老成員的代碼，做到熟悉，然后修改，這又是不小的成本了。

在哪里可以下載一個(gè)介于低端設(shè)計(jì)、遍布互聯(lián)網(wǎng)和高級(jí)定制、無(wú)比昂貴之間的東西嗎？相當(dāng)于一個(gè)后臺(tái)開發(fā)者的API或者代碼庫(kù)的東西？我們可以創(chuàng)建出某種專為前端而定制的東西嗎？

我們需要能夠利用一些預(yù)先寫好的元素，將他們添加到定制專欄，并開發(fā)一個(gè)定制的解決方案這就是介于低端和高端之間的產(chǎn)物。我們不再需要從零開始構(gòu)建框架，我們可以節(jié)省好幾個(gè)小時(shí)呢！

我是在說(shuō)我們應(yīng)該拋棄定制解決方案的框架嗎？不，當(dāng)然不是。在web開發(fā)的世界里，一個(gè)完整的定制解決方案已然存在，就好比CMS的存在一樣，各有各的用武之地。如果你的客戶有時(shí)間和金錢來(lái)構(gòu)建出最好的效果，那么何樂而不為呢？

但是要知道客戶一般都是沒有足夠的資金和時(shí)間來(lái)等你從頭構(gòu)造?；蛟S“不好”是允許存在的，或許需要下載的代碼會(huì)稍微冗長(zhǎng)一些，然而這個(gè)解決方案會(huì)被記錄下來(lái)，并在開發(fā)的時(shí)候起到很積極的作用。它可以快速產(chǎn)出一個(gè)并不低級(jí)的產(chǎn)物，這是值得的。

在web世界里，其他技術(shù)在處理響應(yīng)式設(shè)計(jì)方面有自己的優(yōu)勢(shì)與不足，所以我們大可以好好考慮一下這個(gè)框架。

Grk

二、響應(yīng)式設(shè)計(jì)框架的優(yōu)缺點(diǎn)

聚焦Bootstrap 3和Foundation 5，讓我們一起來(lái)分析使用其中一種框架構(gòu)建自己的網(wǎng)站的優(yōu)勢(shì)與短板。

瀏覽器兼容性

瀏覽器調(diào)試所花的時(shí)間有時(shí)趕上了制作網(wǎng)站本身所花的時(shí)間。如果你可以減少調(diào)試瀏覽器所花的時(shí)間，那么就是在為客戶節(jié)約成本（當(dāng)然也是在保護(hù)的你的頭發(fā)不那么早就掉光）。

響應(yīng)式設(shè)計(jì)框架是一個(gè)基于在各種瀏覽器調(diào)試成功的框架。使用這些框架，可以大大減少建設(shè)網(wǎng)站時(shí)所耗費(fèi)的時(shí)間（測(cè)試次數(shù)的多少取決于你定制了多少框架的內(nèi)容，如果你僅僅只是改變了幾個(gè)顏色而已，那么調(diào)試的次數(shù)就非常少；如果你把框架的網(wǎng)格系統(tǒng)改來(lái)改去，那么你就需要多番調(diào)試）。

最新的框架支持IE9及以上瀏覽器版本。在IE8上使用框架有一點(diǎn)點(diǎn)小技巧，但是框架完全不兼容于IE6和IE7。一般情況下，框架還支持其他瀏覽器，比如Firefox、Safari和Chrome，以及移動(dòng)端瀏覽器。

不幸的是，如果你想要把框架應(yīng)用在還沒被調(diào)試過(guò)的瀏覽器上，那么你需要自行花時(shí)間來(lái)修改代碼做測(cè)試。

自定義文件

Bootstrap或Foundation的下載包里面都含有最基本的網(wǎng)站構(gòu)建文件，包括富有風(fēng)格的圖標(biāo)和小部件。一些文件會(huì)比較大。一般來(lái)說(shuō)文件都是可讀的經(jīng)過(guò)壓縮的文件格式。

由于你所選的每個(gè)框架都是集大成的框架，所以介于你不需要完全使用整個(gè)框架的所有元素，Bootstra或Foundation允許你自定義下載自己需要的部分。所以你完全可以僅僅托用你需要的css和javascript文件包用在你的web上。這樣就減輕了文件膨脹，并且也減少了下載時(shí)間，同時(shí)效果是（與你下載了整個(gè)框架包所用的效果）一樣的。

但是，如果你想要添加一個(gè)之前被排除在外的小部件或者風(fēng)格，現(xiàn)在你就得重新配置包。不過(guò)這完全是可以避免的。我建議首先以建立網(wǎng)站為首，不要去考慮外觀。首先定制自己需要的特性，然后再來(lái)下載那些僅包含特定特性的包，一旦框架就位，你就可以開始定制網(wǎng)站的外觀了。

注意：每當(dāng)新版本的Bootstrap 或Foundation發(fā)布，你就得重新下載定制包。仔細(xì)記錄下你所采用的和沒有采用的文件，這樣在文件更新時(shí)就不需要重復(fù)這個(gè)步驟了。

CMS Critic

自定義代碼

可能需要某種程度的自定義，框架不是下載下來(lái)就可以立即上線使用的。你可能會(huì)想要改變一些顏色。而如果你有一定的經(jīng)驗(yàn)，或許你會(huì)直接攻克網(wǎng)格系統(tǒng)。

自定義代碼僅僅是因?yàn)槟闶褂靡粋€(gè)框架并不是為了使你的網(wǎng)站顯得很大眾化。你可以自定義css來(lái)改善你的網(wǎng)站外觀。要么引用LESS (Bootstrap) 或者Sass (Foundation)，要么直接自己寫都行。

來(lái)自Bootstrap框架里的盒子樣式是非常寬泛的。這里的假設(shè)就是你根本不會(huì)改變它們。所以你可以在一個(gè)單獨(dú)的樣式表里面引用LESS或Sass文件來(lái)覆蓋它們。不幸的是LESS和Sass文件也是極小的，你需要額外的補(bǔ)充自己的代碼。Bootstrap豐富的內(nèi)置風(fēng)格使它很受前端開發(fā)人員的歡迎。

Foundation有少量的風(fēng)格基礎(chǔ)。你也自定義一個(gè)樣式表來(lái)覆蓋它們、引用外部樣式表，看起來(lái)完全自定義一個(gè)樣式表會(huì)更加容易。總的來(lái)說(shuō)在Foundation方面，沒有一定基礎(chǔ)的開發(fā)者會(huì)比較難以駕馭這個(gè)框架，因?yàn)樗枰闶紫日莆毡锐{馭Bootstrap需要更多的CSS 和Sass的知識(shí)。

Bootstrap和Foundation，可以在下載之前就被自定義，盡管需要簡(jiǎn)單改變一些LESS和 Sass。在Bootstrap里面，自定義選項(xiàng)用了幾個(gè)頁(yè)面來(lái)展示（與此相反，F(xiàn)oundation僅僅只是一點(diǎn)點(diǎn)的改變）。但是如果你對(duì)LESS和 Sass不熟悉的話，這就顯得比較快捷但是比較骯臟。

同樣的，你也可以通過(guò)定義javascript來(lái)定義功能。最新版本的Bootstrap和Foundation都支持使用jQuery來(lái)自定義部件。

如果你使用專門的屏幕來(lái)引用框架，那么在下次框架更新時(shí)，你還需要另外再自定義一次。

請(qǐng)留意Foundation擁有許多javascript分號(hào)，但是Bootstrap只有少量，這回影響開發(fā)人員的一個(gè)選擇。

可訪問性

可訪問性對(duì)于開發(fā)者來(lái)說(shuō)已經(jīng)變得越來(lái)越重要了。這兩個(gè)框架都有有效地HTML，但是我們有必要比較一下在HTML之外這兩個(gè)框架的可訪問性。

Bootstrap在 Joomla的幫助下取得了一定的進(jìn)步。Joomla是一個(gè)開源的CMS，把Bootstrap引向了第3版本。Joomla的開發(fā)人員在它的可訪問性方面做了很長(zhǎng)的探討，他們不希望Bootstrap減少CMS的可訪問性，所以他們引用了ARIA規(guī)范和screen reader-only風(fēng)格。

Foundation比較不幸的是到目前為止都還沒有優(yōu)先考慮可訪問性。它不引用ARIA規(guī)范和screen reader-only風(fēng)格。不過(guò)Zurb已經(jīng)表示Foundation會(huì)做到更多。

Webflow

三、總結(jié)

沒有一個(gè)響應(yīng)式框架是好的。作為一個(gè)執(zhí)行各種任務(wù)的工具，需要額外的代碼來(lái)使這個(gè)框架響應(yīng)我們的需求。當(dāng)然，完全自定義一個(gè)網(wǎng)站或許會(huì)比使用一個(gè)框架更加有效。

一些前端開發(fā)人員告訴我他們有自己的網(wǎng)格系統(tǒng)、css和javascript組件來(lái)維護(hù)自己的網(wǎng)站。當(dāng)然這樣的方法沒什么錯(cuò)誤可言，但是這樣做你就需要維護(hù)自己的代碼。而一個(gè)流行的框架可以減少你的維護(hù)成本。

我呼吁我的前端開發(fā)者重新考慮使用響應(yīng)式設(shè)計(jì)框架的前景。把它當(dāng)做一個(gè)生產(chǎn)力工具，你可以使用其中的一部分，甚至是全部。下載部分文件或者所有，使用僅僅一個(gè)原型或者所有，總之你知道用在你的項(xiàng)目上你需要使用多少。

一個(gè)框架旨在使網(wǎng)站在最少調(diào)試的情況下運(yùn)行得很快。自定義它的過(guò)程是完全不同的，或許你會(huì)改變少量顏色或者其他。但是無(wú)論何種自定義，你都需要做到規(guī)范定義，一切做到標(biāo)準(zhǔn)化，記錄下代碼，做到可以很容易就傳遞給另一個(gè)開發(fā)人員并被他所熟悉。代碼當(dāng)然不是好的，但是已經(jīng)很好了。它大大降低了我們開發(fā)一個(gè)網(wǎng)站所需要的時(shí)間。

這個(gè)世界當(dāng)然有完全定制的空間。我的意思并不是支持大規(guī)模定制。當(dāng)客戶想要在設(shè)計(jì)里面添加更多的內(nèi)容時(shí)就有必要考慮一個(gè)響應(yīng)式框架了?？偟膩?lái)說(shuō)它是一個(gè)非常好用的工具。在快速原型實(shí)現(xiàn)、測(cè)試甚至是生產(chǎn)代碼方面都能夠讓你的客戶滿意。

當(dāng)前名稱：重磅來(lái)襲！設(shè)計(jì)師不應(yīng)該錯(cuò)過(guò)的響應(yīng)式設(shè)計(jì)框架
本文網(wǎng)址：http://www.rwnh.cn/news13/165163.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站改版、云服務(wù)器、面包屑導(dǎo)航、網(wǎng)站導(dǎo)航、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)