響應(yīng)式網(wǎng)站設(shè)計(jì)和網(wǎng)站的布局。

響應(yīng)式網(wǎng)站設(shè)計(jì)就是如何構(gòu)建一個(gè)基于網(wǎng)站的布局，即調(diào)整及媒體查詢，所描述的伊桑馬科特圖像的網(wǎng)站。馬科特后定義的技術(shù)，響應(yīng)式設(shè)計(jì)的框架開(kāi)始浮出水面，納入這些原則。大多是基于CSS和JavaScript，許多這些框架都是開(kāi)源的，免費(fèi)下載和快速定制。

一些最流行 的今天是引導(dǎo)和基金會(huì)，我們將專(zhuān)注于本文中。

作為響應(yīng)式設(shè)計(jì)框架走紅，一個(gè)很大的爭(zhēng)論出現(xiàn)了：為什么一個(gè)專(zhuān)業(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ì)人員可以編寫(xiě)自己的網(wǎng)格系統(tǒng)，他們可能應(yīng)該如果他們知道任何HTML和CSS。
• 基于框架的網(wǎng)站加載緩慢。
• 基于框架的所有網(wǎng)站看起來(lái)是一樣的。
• 膨脹是常見(jiàn)的，無(wú)論是由于額外的div標(biāo)簽，5000 +行CSS或大JavaScript文件。

而批評(píng)者抱怨叫囂著，響應(yīng)式設(shè)計(jì)框架繼續(xù)增長(zhǎng)受歡迎。我認(rèn)為，這些框架有積極的方面，即使是最有經(jīng)驗(yàn)的前端Web開(kāi)發(fā)人員，我會(huì)在下面列舉這些。

該網(wǎng)站為美國(guó)現(xiàn)代派保蘭德建有基金會(huì)。

一個(gè)地方的響應(yīng)式設(shè)計(jì)框架

一天早晨，我是聽(tīng)白禮的主題演講在東北的PHP會(huì)議。白色是一個(gè)PHP開(kāi)發(fā)人員，和他的談話是在Web和PHP在過(guò)去的20年發(fā)展的回顧。有一點(diǎn)他做的是，15年前，后端開(kāi)發(fā)人員建立一切從頭開(kāi)始。沒(méi)有多少是可以在開(kāi)源世界的時(shí)候，和專(zhuān)有內(nèi)容管理系統(tǒng)（CMS）的成本在幾十萬(wàn)美元。如果你想要一個(gè)調(diào)查，為您的網(wǎng)站，例如，你必須從頭寫(xiě)一個(gè)。

現(xiàn)在，在2014年，后端開(kāi)發(fā)人員不再這樣做。為什么會(huì)他們，當(dāng)他們可以使用的SurveyMonkey的API來(lái)創(chuàng)造一些對(duì)他們的客戶在10個(gè)小時(shí)，而不是100或1000小時(shí)？是的SurveyMonkey的代碼最真棒在世界上，高效，最巧妙的書(shū)面和膨脹，免費(fèi)的嗎？我不是一個(gè)PHP開(kāi)發(fā)人員，不知道這個(gè)問(wèn)題的答案。然而，API是測(cè)試和調(diào)試，它運(yùn)行良好，并準(zhǔn)備在你的下一個(gè)項(xiàng)目被納入 - 并具有巨大的價(jià)值。

除非你的客戶想要的東西非常具體和有足夠的資金來(lái)資助這樣的項(xiàng)目，如白解釋說(shuō)，大多數(shù)PHP開(kāi)發(fā)人員會(huì)說(shuō)，有寫(xiě)你自己的調(diào)查，由專(zhuān)人在2014年沒(méi)有很好的理由。

那么，什么是等效的技術(shù)，快捷的網(wǎng)站的前端？不幸的是，我們沒(méi)有之一。

目前，我們有兩個(gè)選擇來(lái)創(chuàng)建一個(gè)網(wǎng)站的前端。第一個(gè)選擇是下載一個(gè)模板（或主題）。與基于CMS的網(wǎng)站常用的一個(gè)主題可能會(huì)出現(xiàn)一些顏色的選擇和幾個(gè)變量來(lái)進(jìn)行調(diào)整。從有利的一面，大多數(shù)主題都是免費(fèi)的或相對(duì)于整個(gè)網(wǎng)站的成本非常低的成本。下載一個(gè)主題，改變一些顏色和下降的一個(gè)標(biāo)志需要一點(diǎn)時(shí)間。

更重要的是，一個(gè)好的主題會(huì)定期更新，并且它會(huì)與文件，使之更簡(jiǎn)單的修改。在消極的一面，主題可能會(huì)被絲毫不少，并沒(méi)有獨(dú)特的，它甚至可能使網(wǎng)站看起來(lái)像它屬于一個(gè)特定的CMS。

第二個(gè)選擇是一個(gè)完全定制的解決方案。平面設(shè)計(jì)師將聘請(qǐng)來(lái)討論品牌，他們會(huì)遍歷三種設(shè)計(jì)和兩輪的修訂，或許原型直接在瀏覽器或轉(zhuǎn)換的設(shè)計(jì)，HTML和CSS，設(shè)計(jì)與CMS或他們選擇的后端集成如果需要，并提供了（希望）好的結(jié)果給客戶端。從有利的一面，每個(gè)標(biāo)簽將被精確放置，并且代碼將完全語(yǔ)義，與脂肪沒(méi)有一盎司或過(guò)量的div被發(fā)現(xiàn)。

要做到這一點(diǎn)，不過(guò)，開(kāi)發(fā)人員必須訓(xùn)練有素，經(jīng)驗(yàn)豐富的 - 每當(dāng)該口徑的開(kāi)發(fā)商參與，明碼標(biāo)價(jià)上升相應(yīng)地，把這個(gè)項(xiàng)目出來(lái)的小客戶的金融影響力和顯著的大的支出增加客戶端。此外，除非額外的美元花在文檔（這是不尋常的在我的經(jīng)驗(yàn)），如果最初的開(kāi)發(fā)者離開(kāi)，那么接下來(lái)開(kāi)發(fā)商必須要弄清楚的代碼，以便修改。這是一個(gè)額外的成本給客戶端。

在哪里下載一個(gè)低端的設(shè)計(jì)之間的中間地帶，用于在互聯(lián)網(wǎng)上，并創(chuàng)造一些高度定制和昂貴？哪里是一個(gè)后端開(kāi)發(fā)人員的API或代碼庫(kù)的相同呢？我們能否建立某種形式的大規(guī)模定制的前端？

我們需要能夠挖掘到一些預(yù)先寫(xiě)好的內(nèi)容，定制增加將它們合并，并制定一個(gè)解決方案，比罐頭主題更加個(gè)性化，但不是一個(gè)高端解決方案更少的定制。如果不從頭開(kāi)始，我們就可以節(jié)省時(shí)間的開(kāi)發(fā)時(shí)間和節(jié)省下來(lái)的錢(qián)用于客戶端。

我是不是說(shuō)我們應(yīng)該拋棄的框架定制的解決方案？不，當(dāng)然不是。一個(gè)完全定制的解決方案有它在Web開(kāi)發(fā)世界上的地位，就像罐頭CMS的主題有自己的位置。如果您的客戶有足夠的時(shí)間和金錢(qián)來(lái)達(dá)到好和完全定制的解決方案是項(xiàng)目完善的方法，那么為什么不呢？

但很多客戶都非常有限的時(shí)間和金錢(qián)，他們可能無(wú)法等待或支付好。我們能得到的東西，是“相當(dāng)不錯(cuò)”，而不是？也許不是每個(gè)分區(qū)將被完全有條件，有可能是數(shù)太多其中許多。或許碼需要多一點(diǎn)的時(shí)間比需要下載。然而，該解決方案將被記錄在案，在積極開(kāi)發(fā)和定制的，它可以迅速建立在超過(guò)一個(gè)自定義的網(wǎng)站要少得多。沒(méi)有價(jià)值的。

就像我們所掌握的所有其他技術(shù)在Web開(kāi)發(fā)領(lǐng)域，一個(gè)負(fù)責(zé)任的設(shè)計(jì)框架都有自己的肯定和否定，我們需要考慮的問(wèn)題。

本網(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á)開(kāi)發(fā)網(wǎng)站本身。如果你可以減少花費(fèi)在調(diào)試的時(shí)候，你可以節(jié)省客戶端（和你自己的頭發(fā)）顯著成本。

響應(yīng)式設(shè)計(jì)的框架已經(jīng)過(guò)測(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是不與任何兼容。一般情況下，這些框架也支持其他常見(jiàn)的瀏覽器，包括Firefox，Safari和Chrome，以及不同組的移動(dòng)瀏覽器的最新版本。

不幸的是，如果你想支持的尚未經(jīng)過(guò)測(cè)試一個(gè)瀏覽器，那么你可能會(huì)發(fā)現(xiàn)需要修正的代碼，你不熟悉的bug。

自定義文件

引導(dǎo)和基金會(huì)有一個(gè)包含所有必需的文件，樣式和窗口小部件標(biāo)準(zhǔn)下載軟件包。有些文件比較大，有幾個(gè)要下載的文件。一般情況下，文件會(huì)以人類(lèi)可讀和精縮格式。

僅僅因?yàn)槟愕倪x擇，附帶的樣式和JavaScript，支持幾十種成分的框架并不意味著你必須下載并整合他們所有。引導(dǎo)和基金會(huì)允許您自定義您的下載包，這樣你就可以只搶了CSS和JavaScript你需要運(yùn)行您的網(wǎng)站。這降低了膨脹，并作為結(jié)果，減少了下載時(shí)間，對(duì)框架的公共參數(shù)。

以后，如果您想添加一個(gè)Widget或風(fēng)格，你以前被排除在外，您可能需要重新配置包。這是可以避免的，但是，我建議首先開(kāi)發(fā)的網(wǎng)站，無(wú)需自定義外觀，以確定哪些功能是你所需要的。然后，您可以自定義下載包中包含的代碼只有這些功能。一旦框架到位，然后你可以自定義網(wǎng)站的外觀。

注：當(dāng)引導(dǎo)或基金會(huì)的下一個(gè)次要版本發(fā)布時(shí)，您需要重新下載自定義軟件包。認(rèn)真記筆記的你有什么，還沒(méi)有下載，讓您可以更新您的文件時(shí)，重復(fù)上述過(guò)程。

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)站有看起來(lái)像之一。您可以自定義CSS來(lái)給網(wǎng)站自身的獨(dú)特的外觀，無(wú)論是使用更小（引導(dǎo)）或薩斯（用于基金會(huì)）或僅僅是從頭開(kāi)始編寫(xiě)CSS。

在那進(jìn)來(lái)引導(dǎo)開(kāi)箱風(fēng)格相當(dāng)廣泛，并且假設(shè)是，你將不會(huì)被廣泛改變它們。您可以覆蓋的CSS在一個(gè)單獨(dú)的樣式表或通過(guò)使用較少或薩斯文件。不幸的是，小文件，供LESS和薩斯文件，所以你需要找出許多代碼在你自己。內(nèi)置的自舉了豐富的款式使其成為經(jīng)驗(yàn)的前端Web開(kāi)發(fā)的熱門(mén)選擇。（請(qǐng)注意，引導(dǎo)已在過(guò)去一個(gè)月內(nèi)發(fā)布薩斯文件。在此之前，只減檔可供它。）

基金會(huì)擁有較少的款式開(kāi)箱即用。雖然你可以用一個(gè)單獨(dú)的樣式表自定義，基金會(huì)是更有效地通過(guò)其廣泛的薩斯文件（該文件提供）定制。用更少的CSS來(lái)覆蓋，就可以更輕松地構(gòu)建一個(gè)完全定制的外觀。然而，經(jīng)驗(yàn)不足的前端開(kāi)發(fā)人員可能會(huì)發(fā)現(xiàn)，因?yàn)镃SS的更多的知識(shí)基礎(chǔ)更加難以處理和薩斯必需的。

引導(dǎo)和基金會(huì)也可以，甚至在下載定制，通過(guò)簡(jiǎn)單的修改LESS和薩斯變量。在引導(dǎo)時(shí)，自定義選項(xiàng)去的網(wǎng)頁(yè)，而只有極少數(shù)的變化，可向基金會(huì)。但是，如果你不熟悉小于或無(wú)禮的話，這是一個(gè)快速和骯臟的方式來(lái)定制框架的外觀。

同樣地，你可以利用JavaScript的提供自定義功能。引導(dǎo)和基金會(huì)的最新版本的jQuery需要定制部件的工作。

如果您使用的引導(dǎo)和基金會(huì)的專(zhuān)用屏幕，那么你的下載包將被定制。當(dāng)每個(gè)框架的下一個(gè)次要版本發(fā)布時(shí)，您將需要一個(gè)新的包一遍自定義變量。

需要注意的是基金會(huì)的JavaScript包括了很多精心布置的分號(hào)。引導(dǎo)含有非常少的分號(hào)。這會(huì)影響一些開(kāi)發(fā)商的選框架。

無(wú)障礙

無(wú)障礙正在成為開(kāi)發(fā)商越來(lái)越重要。這兩個(gè)框架提供有效的HTML，但是讓我們考慮無(wú)障礙超出有效的HTML。

引導(dǎo)已取得了一些進(jìn)步的幫助下的Joomla。的Joomla，一個(gè)開(kāi)源的CMS，結(jié)合引導(dǎo)到版本3。的Joomla的開(kāi)發(fā)者有一個(gè)長(zhǎng)期的承諾，可訪問(wèn)性，并且他們不想引導(dǎo)，以減少CMS的可訪問(wèn)性。因此，在引導(dǎo)3，你會(huì)發(fā)現(xiàn)ARIA代碼和屏幕閱讀器，只有風(fēng)格，在其他輔助功能的改進(jìn)。

基金會(huì)，不幸的是，并沒(méi)有優(yōu)先無(wú)障礙迄今。它不來(lái)與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è)框架更有效。

一些前端開(kāi)發(fā)人員告訴我，他們有自己的網(wǎng)格系統(tǒng)，CSS和他們保持自己的網(wǎng)站的JavaScript組件。當(dāng)然，沒(méi)有什么是不對(duì)的做法。但你必須自己維護(hù)的代碼。一個(gè)流行的框架，大限度地減少需要維護(hù)和測(cè)試。

我呼吁我的同胞前端Web開(kāi)發(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)試。定制的挫折感出它看起來(lái)完全不同，或者改變短短的顏色和完成。但是你使用它，你就會(huì)有一個(gè)可以很容易地傳遞給其他開(kāi)發(fā)人員進(jìn)行維護(hù)和調(diào)整，而且看起來(lái)合理，功能以及標(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ì)于捉襟見(jiàn)肘的預(yù)算，也許這是一個(gè)好主意，考慮一個(gè)負(fù)責(zé)任的設(shè)計(jì)框架，畢竟。您可能會(huì)發(fā)現(xiàn)它是一個(gè)有用的工具在你的軍火庫(kù)，快速原型設(shè)計(jì)，測(cè)試，甚至生產(chǎn)代碼 - 一個(gè)擴(kuò)展您的產(chǎn)品系列，使客戶滿意。

當(dāng)前名稱：響應(yīng)式網(wǎng)站設(shè)計(jì)和網(wǎng)站的布局。
鏈接分享：http://muchs.cn/news2/78752.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有響應(yīng)式網(wǎng)站等

廣告

聲明：本網(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)