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

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

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

Bootstrap

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

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

Foundation

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

Skeleton

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

Golden Grid System

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

Less Framework

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

Gumby

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

320 and UP

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

1140px CSS Grid System

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

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

如果你天生對代碼不感冒，又想快速省心的擁有一個高質(zhì)量的響應式網(wǎng)站，便于推廣，那么你也可以聯(lián)系我們詠熠科技，讓我們幫你實現(xiàn)您的自適應網(wǎng)站。