最常用的幾款自適應(yīng)網(wǎng)站開發(fā)框架。

隨著HTML5和CSS3的普及，開發(fā)人員和設(shè)計(jì)人員對(duì)響應(yīng)網(wǎng)頁的需求越來越多。然而大家對(duì)響應(yīng)式框架卻有不同的看法。有人認(rèn)為一個(gè)懂HTML5和CSS3的專業(yè)前端應(yīng)該自己寫框架，這樣才能做出最有特色的網(wǎng)站。也有人認(rèn)為響應(yīng)式設(shè)計(jì)框架可以方便前端快速有效地搭建實(shí)用的網(wǎng)站，在節(jié)省時(shí)間和精力方面大有用處。關(guān)于這個(gè)論點(diǎn)，我們更傾向通過技術(shù)來支持。

我們認(rèn)為即使是有經(jīng)驗(yàn)的前端開發(fā)也要好好研究一下?？梢越o我們提供一些便利。在今天這個(gè)互聯(lián)網(wǎng)高速發(fā)展的時(shí)代，開發(fā)寫框架做網(wǎng)站太費(fèi)時(shí)間了。此外在使用響應(yīng)式框架時(shí)，工程師還可以充分發(fā)揮自己的創(chuàng)造力，定制很多功能，制作有新意的網(wǎng)站。今天我們就來介紹一些目前前端經(jīng)常使用的響應(yīng)式框架。可以根據(jù)自己的需求選擇合理的框架使用。

Bootstrap

Bootstrap是Twitter推出的用于前端開發(fā)的開源工具包。它是目前最流行的HTML5框架，在中國(guó)擁有最大的用戶群和最高的知名度。Bootstrap的口號(hào)是“簡(jiǎn)單、直觀、強(qiáng)大，讓web開發(fā)更快更簡(jiǎn)單”，也確實(shí)在努力實(shí)現(xiàn)這一點(diǎn):基本涵蓋了Bootstrap編輯器、自定義jQuery插件等所有搭建的組件，可以實(shí)現(xiàn)自定義表單元素、Javascript交互性、跨瀏覽器兼容性等多種功能。對(duì)于大多數(shù)站長(zhǎng)來說，Bootstrap方便簡(jiǎn)單，建立一個(gè)更漂亮的響應(yīng)式網(wǎng)站也非?？欤撬麄兊念^號(hào)選擇。

然而，Bootstrap并不是無懈可擊的。Bootstrap雖然兼容Chrome、Firefox、Safari、Opera、360、搜狗等瀏覽器，但因?yàn)槭腔贖TML5和CSS3開發(fā)的，所以有些功能對(duì)IE瀏覽器不那么友好，在IE瀏覽器上可能會(huì)出現(xiàn)一些問題。還有，如果你的網(wǎng)站定制設(shè)計(jì)包含的內(nèi)容過多，使用bootstrap作為框架的底層進(jìn)行修改，一般會(huì)涉及到大量的樣式重復(fù)，可能會(huì)造成CSS層次的混亂，不利于網(wǎng)站的后期維護(hù)。

Foundation

Foundation基于的柔性網(wǎng)格，采用最新技術(shù)，已經(jīng)成為先進(jìn)的響應(yīng)式前端框架的代表。它的整體框架設(shè)計(jì)理念是移動(dòng)終端優(yōu)先，所以它的突出特點(diǎn)是在手機(jī)等移動(dòng)設(shè)備上表現(xiàn)更好。同時(shí)，F(xiàn)oundation支持用戶使用定制服務(wù)(定義網(wǎng)格、顏色、字體大小等。)，提供了Web的各種UI組件，如表單、按鈕等。，在操作和使用上足夠靈活。相對(duì)于Bootstrap的廣泛使用，F(xiàn)oundation在國(guó)內(nèi)比較低調(diào)，因?yàn)閹缀鯖]有中文版的文檔和教程。但是很多站長(zhǎng)認(rèn)為用Bootstrap框架的人太多了，做出來的網(wǎng)站都是一個(gè)模子刻出來的，無法讓自己的網(wǎng)站在競(jìng)爭(zhēng)對(duì)手中脫穎而出。這個(gè)時(shí)候，他們更喜歡用粉底做一個(gè)高大上的、獨(dú)一無二的網(wǎng)站。但是這個(gè)框架也有自己的缺點(diǎn)，就是兼容性的問題。Foundation 4已經(jīng)放棄了對(duì)IE8的兼容，在國(guó)內(nèi)瀏覽器環(huán)境下Foundation的行為是好是壞，我們不好下結(jié)論。

Skeleton

與前兩者相比，Skeleton在國(guó)內(nèi)用戶心目中并沒有那么高。它使用了一個(gè)簡(jiǎn)單的網(wǎng)格系統(tǒng)，并收集了CSS和JS文件，使基于骨架的網(wǎng)站能夠根據(jù)不同分辨率的設(shè)備，可以讓用戶界面更加友好，優(yōu)化用戶體驗(yàn)。雖然Skeleton只是定義了一些標(biāo)準(zhǔn)的HTML元素和960px標(biāo)準(zhǔn)模板，但并不影響一般網(wǎng)站的建設(shè)需求。也是因?yàn)檫@個(gè)原因，所以比較好用，尤其是對(duì)于一些小型網(wǎng)頁項(xiàng)目。

Golden Grid System

如果你對(duì)網(wǎng)格系統(tǒng)感興趣，Golden Grid System是你最好的選擇。起初，它以16列網(wǎng)格的模式出現(xiàn)，但你也可以將其折疊起來，將窗口縮小為8列或4列布局，適合在平板電腦和手機(jī)上瀏覽。所以它是一個(gè)增加兼容性的折疊網(wǎng)格，有四個(gè)明顯的特征:分欄、跨頁、下劃線和腳本。使用網(wǎng)格系統(tǒng)框架制作網(wǎng)站有很多好處，比如可以幫助建立清晰規(guī)整的布局，增加網(wǎng)頁的可讀性；作為網(wǎng)頁設(shè)計(jì)師和前端開發(fā)者之間的紐帶，方便他們溝通；實(shí)現(xiàn)自適應(yīng)布局以應(yīng)對(duì)不同尺寸的屏幕。

Less Framework

Less Framework是經(jīng)典的常見響應(yīng)式框架之一。它是一個(gè)自適應(yīng)的CSS網(wǎng)格系統(tǒng)，覆蓋4種布局和3種字體預(yù)設(shè)，滿足電腦、平板、手機(jī)等不同窗口的需求。Less Framework的工作原理是在單一網(wǎng)格的基礎(chǔ)上，改變布局列數(shù)和外緣寬度來做出不同的布局。CSS作為一種非編程語言，對(duì)于很多設(shè)計(jì)師來說是比較難的。Less的出現(xiàn)正好解決了這個(gè)問題。大大簡(jiǎn)化了CSS代碼的編寫，降低了網(wǎng)頁的維護(hù)成本，讓設(shè)計(jì)師用更少的代碼做出更好的網(wǎng)站。這與其名字不太相符。難怪這么多工程師愛上這個(gè)框架。

Gumby

如果你是這個(gè)領(lǐng)域的新手，Gumby 絕對(duì)是你入門的好選擇。Gumby是一個(gè)基于SASS的響應(yīng)式CSS框架。自帶模板和Web UI工具包，有各種好看的按鈕、表格、導(dǎo)航、選項(xiàng)卡，響應(yīng)速度快。它還支持無編碼設(shè)計(jì)。即使不懂技術(shù)，直接手動(dòng)操作起來也非常簡(jiǎn)單好用，后期維護(hù)也很方便。

320 and UP

這個(gè)框架首先面向小屏幕，使用小屏幕樣式表，包含顏色、排版、布局等一些設(shè)置屬性，保證了網(wǎng)站內(nèi)容的優(yōu)先級(jí)。小屏幕可以適應(yīng)的很好，大屏幕也絲毫沒有問題。

1140px CSS Grid System

一個(gè)響應(yīng)式網(wǎng)站不僅意味著滿足小屏幕設(shè)備的需求，還需要在電腦屏幕上良好顯示，并適應(yīng)更大分辨率的布局。140格的框架可以做到這一點(diǎn)，它可以完美地適應(yīng)1280分辨率的顯示器。在較小的顯示器上，它可以根據(jù)瀏覽器的寬度變化成流體形式，自適應(yīng)地瀏覽窗口。

介紹到此。不同的響應(yīng)式框架各有自己的優(yōu)缺點(diǎn)，沒有一個(gè)是十全十美的。用框架做網(wǎng)站不代表我們只是拿來主義，還是要合理評(píng)估自己的需求，適當(dāng)定制實(shí)現(xiàn)設(shè)計(jì)內(nèi)容，把框架和自己的想法緊密結(jié)合起來。只有這樣才能充分發(fā)揮響應(yīng)式框架在網(wǎng)站知足中的積極作用，在節(jié)省時(shí)間的同時(shí)還可以做出一個(gè)美觀實(shí)用的自適應(yīng)網(wǎng)站。

如果你天生對(duì)代碼不感冒，又想快速省心的擁有一個(gè)高質(zhì)量的響應(yīng)式網(wǎng)站，便于推廣，那么你也可以聯(lián)系我們?cè)侅诳萍?，讓我們幫你?shí)現(xiàn)您的自適應(yīng)網(wǎng)站。