響應(yīng)式網(wǎng)站設(shè)計(jì)就是如何構(gòu)建一個(gè)基于網(wǎng)站的布局，即調(diào)整及媒體查詢，所描述的伊桑馬科特圖像的網(wǎng)站。馬科特后定義的技術(shù)，響應(yīng)式設(shè)計(jì)的框架開始浮出水面，納入這些原則。大多是基于CSS和JavaScript，許多這些框架都是開源的，免費(fèi)下載和快速定制。
一些最流行 的今天是引導(dǎo)和基金會(huì)，我們將專注于本文中。
作為響應(yīng)式設(shè)計(jì)框架走紅，一個(gè)很大的爭(zhēng)論出現(xiàn)了：為什么一個(gè)專業(yè)的設(shè)計(jì)師用一個(gè)響應(yīng)式設(shè)計(jì)的框架？
互聯(lián)網(wǎng)辯論憤怒的。許多聲明，響應(yīng)式設(shè)計(jì)框架是可怕的，那誰(shuí)也不知道HTML和CSS的唯一的人會(huì)永遠(yuǎn)使用這樣的事情。下面是對(duì)框架的標(biāo)準(zhǔn)參數(shù)：
- 設(shè)計(jì)人員可以編寫自己的網(wǎng)格系統(tǒng)，他們可能應(yīng)該如果他們知道任何HTML和CSS。
- 基于框架的網(wǎng)站加載緩慢。
- 基于框架的所有網(wǎng)站看起來是一樣的。
- 膨脹是常見的，無(wú)論是由于額外的div標(biāo)簽，5000 +行CSS或大JavaScript文件。
而批評(píng)者抱怨叫囂著，響應(yīng)式設(shè)計(jì)框架繼續(xù)增長(zhǎng)受歡迎。我認(rèn)為，這些框架有積極的方面，即使是最有經(jīng)驗(yàn)的前端Web開發(fā)人員，我會(huì)在下面列舉這些。
一個(gè)地方的響應(yīng)式設(shè)計(jì)框架
一天早晨，我是聽白禮的主題演講在東北的PHP會(huì)議。白色是一個(gè)PHP開發(fā)人員，和他的談話是在Web和PHP在過去的20年發(fā)展的回顧。有一點(diǎn)他做的是，15年前，后端開發(fā)人員建立一切從頭開始。沒有多少是可以在開源世界的時(shí)候，和專有內(nèi)容管理系統(tǒng)（CMS）的成本在幾十萬(wàn)美元。如果你想要一個(gè)調(diào)查，為您的網(wǎng)站，例如，你必須從頭寫一個(gè)。
現(xiàn)在，在2014年，后端開發(fā)人員不再這樣做。為什么會(huì)他們，當(dāng)他們可以使用的SurveyMonkey的API來創(chuàng)造一些對(duì)他們的客戶在10個(gè)小時(shí)，而不是100或1000小時(shí)？是的SurveyMonkey的代碼最真棒在世界上，最高效，最巧妙的書面和膨脹，免費(fèi)的嗎？我不是一個(gè)PHP開發(fā)人員，不知道這個(gè)問題的答案。然而，API是測(cè)試和調(diào)試，它運(yùn)行良好，并準(zhǔn)備在你的下一個(gè)項(xiàng)目被納入 - 并具有巨大的價(jià)值。
除非你的客戶想要的東西非常具體和有足夠的資金來資助這樣的項(xiàng)目，如白解釋說，大多數(shù)PHP開發(fā)人員會(huì)說，有寫你自己的調(diào)查，由專人在2014年沒有很好的理由。
那么，什么是等效的技術(shù)，快捷的網(wǎng)站的前端？不幸的是，我們沒有之一。
目前，我們有兩個(gè)選擇來創(chuàng)建一個(gè)網(wǎng)站的前端。第一個(gè)選擇是下載一個(gè)模板（或主題）。與基于CMS的網(wǎng)站常用的一個(gè)主題可能會(huì)出現(xiàn)一些顏色的選擇和幾個(gè)變量來進(jìn)行調(diào)整。從有利的一面，大多數(shù)主題都是免費(fèi)的或相對(duì)于整個(gè)網(wǎng)站的成本非常低的成本。下載一個(gè)主題，改變一些顏色和下降的一個(gè)標(biāo)志需要一點(diǎn)時(shí)間。
更重要的是，一個(gè)好的主題會(huì)定期更新，并且它會(huì)與文件，使之更簡(jiǎn)單的修改。在消極的一面，主題可能會(huì)被絲毫不少，并沒有獨(dú)特的，它甚至可能使網(wǎng)站看起來像它屬于一個(gè)特定的CMS。
第二個(gè)選擇是一個(gè)完全定制的解決方案。平面設(shè)計(jì)師將聘請(qǐng)來討論品牌，他們會(huì)遍歷三種設(shè)計(jì)和兩輪的修訂，或許原型直接在瀏覽器或轉(zhuǎn)換的設(shè)計(jì)，HTML和CSS，設(shè)計(jì)與CMS或他們選擇的后端集成如果需要，并提供了（希望）完美的結(jié)果給客戶端。從有利的一面，每個(gè)標(biāo)簽將被精確放置，并且代碼將完全語(yǔ)義，與脂肪沒有一盎司或過量的div被發(fā)現(xiàn)。
要做到這一點(diǎn)，不過，開發(fā)人員必須訓(xùn)練有素，經(jīng)驗(yàn)豐富的 - 每當(dāng)該口徑的開發(fā)商參與，明碼標(biāo)價(jià)上升相應(yīng)地，把這個(gè)項(xiàng)目出來的小客戶的金融影響力和顯著的大的支出增加客戶端。此外，除非額外的美元花在文檔（這是不尋常的在我的經(jīng)驗(yàn)），如果最初的開發(fā)者離開，那么接下來開發(fā)商必須要弄清楚的代碼，以便修改。這是一個(gè)額外的成本給客戶端。
在哪里下載一個(gè)低端的設(shè)計(jì)之間的中間地帶，用于在互聯(lián)網(wǎng)上，并創(chuàng)造一些高度定制和昂貴？哪里是一個(gè)后端開發(fā)人員的API或代碼庫(kù)的相同呢？我們能否建立某種形式的大規(guī)模定制的前端？
我們需要能夠挖掘到一些預(yù)先寫好的內(nèi)容，定制增加將它們合并，并制定一個(gè)解決方案，比罐頭主題更加個(gè)性化，但不是一個(gè)高端解決方案更少的定制。如果不從頭開始，我們就可以節(jié)省時(shí)間的開發(fā)時(shí)間和節(jié)省下來的錢用于客戶端。
我是不是說我們應(yīng)該拋棄的框架定制的解決方案？不，當(dāng)然不是。一個(gè)完全定制的解決方案有它在Web開發(fā)世界上的地位，就像罐頭CMS的主題有自己的位置。如果您的客戶有足夠的時(shí)間和金錢來達(dá)到完美和完全定制的解決方案是項(xiàng)目完善的方法，那么為什么不呢？
但很多客戶都非常有限的時(shí)間和金錢，他們可能無(wú)法等待或支付完美。我們能得到的東西，是“相當(dāng)不錯(cuò)”，而不是？也許不是每個(gè)分區(qū)將被完全有條件，有可能是數(shù)太多其中許多?；蛟S碼需要多一點(diǎn)的時(shí)間比需要下載。然而，該解決方案將被記錄在案，在積極開發(fā)和定制的，它可以迅速建立在超過一個(gè)自定義的網(wǎng)站要少得多。沒有價(jià)值的。
就像我們所掌握的所有其他技術(shù)在Web開發(fā)領(lǐng)域，一個(gè)負(fù)責(zé)任的設(shè)計(jì)框架都有自己的肯定和否定，我們需要考慮的問題。
本網(wǎng)站對(duì)于希臘餐廳GRK建有引導(dǎo)。
肯定和否定響應(yīng)式設(shè)計(jì)框架
注重引導(dǎo)3和基金會(huì)5，讓我們探索了許多建立你的下一個(gè)網(wǎng)站，這些框架中的一個(gè)積極的和消極的方面。
瀏覽器兼容性
調(diào)試的瀏覽器有時(shí)需要長(zhǎng)達(dá)開發(fā)網(wǎng)站本身。如果你可以減少花費(fèi)在調(diào)試的時(shí)候，你可以節(jié)省客戶端（和你自己的頭發(fā)）顯著成本。
響應(yīng)式設(shè)計(jì)的框架已經(jīng)過測(cè)試，對(duì)一組特定的瀏覽器和設(shè)備，從而降低了推出一個(gè)網(wǎng)站所需的工作。（測(cè)試你不得不做的數(shù)額將根據(jù)有多少你已經(jīng)定制的框架有所不同。如果是你，那么只有很少的測(cè)試是必需的已經(jīng)改變了只有幾個(gè)顏色。如果你已經(jīng)破解了電網(wǎng)系統(tǒng)，然后測(cè)試將需要是廣泛的。）
最新版本的引導(dǎo)和基金會(huì)支持的Internet Explorer（IE）9以上。有技巧，以使框架在IE 8的工作，但是IE 6和7是不與任何兼容。一般情況下，這些框架也支持其他常見的瀏覽器，包括Firefox，Safari和Chrome，以及不同組的移動(dòng)瀏覽器的最新版本。
不幸的是，如果你想支持的尚未經(jīng)過測(cè)試一個(gè)瀏覽器，那么你可能會(huì)發(fā)現(xiàn)需要修正的代碼，你不熟悉的bug。
自定義文件
引導(dǎo)和基金會(huì)有一個(gè)包含所有必需的文件，樣式和窗口小部件標(biāo)準(zhǔn)下載軟件包。有些文件比較大，有幾個(gè)要下載的文件。一般情況下，文件會(huì)以人類可讀和精縮格式。
僅僅因?yàn)槟愕倪x擇，附帶的樣式和JavaScript，支持幾十種成分的框架并不意味著你必須下載并整合他們所有。引導(dǎo)和基金會(huì)允許您自定義您的下載包，這樣你就可以只搶了CSS和JavaScript你需要運(yùn)行您的網(wǎng)站。這降低了膨脹，并作為結(jié)果，減少了下載時(shí)間，對(duì)框架的公共參數(shù)。
以后，如果您想添加一個(gè)Widget或風(fēng)格，你以前被排除在外，您可能需要重新配置包。這是可以避免的，但是，我建議首先開發(fā)的網(wǎng)站，無(wú)需自定義外觀，以確定哪些功能是你所需要的。然后，您可以自定義下載包中包含的代碼只有這些功能。一旦框架到位，然后你可以自定義網(wǎng)站的外觀。
注：當(dāng)引導(dǎo)或基金會(huì)的下一個(gè)次要版本發(fā)布時(shí)，您需要重新下載自定義軟件包。認(rèn)真記筆記的你有什么，還沒有下載，讓您可以更新您的文件時(shí)，重復(fù)上述過程。
CMS的評(píng)論家，一個(gè)網(wǎng)站的評(píng)論內(nèi)容管理系統(tǒng)，建有基金會(huì)。
自定義代碼
很可能需要定制一些水平。你可能會(huì)想改變顏色。如果你是較有經(jīng)驗(yàn)，你不妨破解電網(wǎng)系統(tǒng)。
只是因?yàn)槟闶褂昧艘粋€(gè)框架，并不意味著你的網(wǎng)站有看起來像之一。您可以自定義CSS來給網(wǎng)站自身的獨(dú)特的外觀，無(wú)論是使用更?。ㄒ龑?dǎo)）或薩斯（用于基金會(huì)）或僅僅是從頭開始編寫CSS。
在那進(jìn)來引導(dǎo)開箱風(fēng)格相當(dāng)廣泛，并且假設(shè)是，你將不會(huì)被廣泛改變它們。您可以覆蓋的CSS在一個(gè)單獨(dú)的樣式表或通過使用較少或薩斯文件。不幸的是，小文件，供LESS和薩斯文件，所以你需要找出許多代碼在你自己。內(nèi)置的自舉了豐富的款式使其成為經(jīng)驗(yàn)的前端Web開發(fā)的熱門選擇。（請(qǐng)注意，引導(dǎo)已在過去一個(gè)月內(nèi)發(fā)布薩斯文件。在此之前，只減檔可供它。）
基金會(huì)擁有較少的款式開箱即用。雖然你可以用一個(gè)單獨(dú)的樣式表自定義，基金會(huì)是更有效地通過其廣泛的薩斯文件（該文件提供）定制。用更少的CSS來覆蓋，就可以更輕松地構(gòu)建一個(gè)完全定制的外觀。然而，經(jīng)驗(yàn)不足的前端開發(fā)人員可能會(huì)發(fā)現(xiàn)，因?yàn)镃SS的更多的知識(shí)基礎(chǔ)更加難以處理和薩斯必需的。
引導(dǎo)和基金會(huì)也可以，甚至在下載定制，通過簡(jiǎn)單的修改LESS和薩斯變量。在引導(dǎo)時(shí)，自定義選項(xiàng)去的網(wǎng)頁(yè)，而只有極少數(shù)的變化，可向基金會(huì)。但是，如果你不熟悉小于或無(wú)禮的話，這是一個(gè)快速和骯臟的方式來定制框架的外觀。
同樣地，你可以利用JavaScript的提供自定義功能。引導(dǎo)和基金會(huì)的最新版本的jQuery需要定制部件的工作。
如果您使用的引導(dǎo)和基金會(huì)的專用屏幕，那么你的下載包將被定制。當(dāng)每個(gè)框架的下一個(gè)次要版本發(fā)布時(shí)，您將需要一個(gè)新的包一遍自定義變量。
需要注意的是基金會(huì)的JavaScript包括了很多精心布置的分號(hào)。引導(dǎo)含有非常少的分號(hào)。這會(huì)影響一些開發(fā)商的首選框架。
無(wú)障礙
無(wú)障礙正在成為開發(fā)商越來越重要。這兩個(gè)框架提供有效的HTML，但是讓我們考慮無(wú)障礙超出有效的HTML。
引導(dǎo)已取得了一些進(jìn)步的幫助下的Joomla。的Joomla，一個(gè)開源的CMS，結(jié)合引導(dǎo)到版本3。的Joomla的開發(fā)者有一個(gè)長(zhǎng)期的承諾，可訪問性，并且他們不想引導(dǎo)，以減少CMS的可訪問性。因此，在引導(dǎo)3，你會(huì)發(fā)現(xiàn)ARIA代碼和屏幕閱讀器，只有風(fēng)格，在其他輔助功能的改進(jìn)。
基金會(huì)，不幸的是，并沒有優(yōu)先無(wú)障礙迄今。它不來與ARIA代碼或屏幕閱讀器，只有風(fēng)格。Zurb曾表示，但是，它想做更多。
Webflow的，一拖和拖放的網(wǎng)站建設(shè)者，建有引導(dǎo)。
結(jié)論
無(wú)響應(yīng)的設(shè)計(jì)框架是完美的。對(duì)于執(zhí)行各種作業(yè)的工具，額外的代碼需要作出這樣的工具柔性您的需求。當(dāng)然，完全自定義的代碼很可能是一個(gè)網(wǎng)站不是一個(gè)框架更有效。
一些前端開發(fā)人員告訴我，他們有自己的網(wǎng)格系統(tǒng)，CSS和他們保持自己的網(wǎng)站的JavaScript組件。當(dāng)然，沒有什么是不對(duì)的做法。但你必須自己維護(hù)的代碼。一個(gè)流行的框架，最大限度地減少需要維護(hù)和測(cè)試。
我呼吁我的同胞前端Web開發(fā)人員重新考慮使用一個(gè)負(fù)責(zé)任的設(shè)計(jì)框架。的前景，把它看成是一種生產(chǎn)力工具，你可以在全部或部分借鑒。剛下載的網(wǎng)格系統(tǒng)，或與所有的群眾演員采取全包。也許用一個(gè)框架只為原型設(shè)計(jì)的目的或?qū)嶋H重用的框架，你在自己的項(xiàng)目中熟悉的部分。
框架的目的是獲得一個(gè)網(wǎng)站運(yùn)行迅速，以最小的調(diào)試。定制的挫折感出它看起來完全不同，或者改變短短的顏色和完成。但是你使用它，你就會(huì)有一個(gè)可以很容易地傳遞給其他開發(fā)人員進(jìn)行維護(hù)和調(diào)整，而且看起來合理，功能以及標(biāo)準(zhǔn)化，文檔化的代碼。該代碼是不完美的，當(dāng)然，但它是相當(dāng)不錯(cuò)的。它減少了建立一個(gè)網(wǎng)站所需的時(shí)間，這將使得該網(wǎng)站花費(fèi)少一點(diǎn)，太。
世界上肯定有空間，完全定制的網(wǎng)站。我的意思并不是建議放棄他們支持大規(guī)模定制的。然而，下一次客戶端需要更多的在他們的設(shè)計(jì)有點(diǎn)，但對(duì)于捉襟見肘的預(yù)算，也許這是一個(gè)好主意，考慮一個(gè)負(fù)責(zé)任的設(shè)計(jì)框架，畢竟。您可能會(huì)發(fā)現(xiàn)它是一個(gè)有用的工具在你的軍火庫(kù)，快速原型設(shè)計(jì)，測(cè)試，甚至生產(chǎn)代碼 - 一個(gè)擴(kuò)展您的產(chǎn)品系列，使客戶滿意。
本文作者來自北京網(wǎng)站建設(shè)公司-傳誠(chéng)信，轉(zhuǎn)載請(qǐng)注明出處：北京傳誠(chéng)信（js-hbsb.cn）
