響應(yīng)式Web設(shè)計(jì)技術(shù)之UIKit框架

2.2 CSS3

CSS3作為CSS目前的最新版本，能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離。可以有效地對(duì)頁(yè)面布局、字體、顏色、背景和其他效果實(shí)現(xiàn)精確控制。CSS3語(yǔ)言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一整個(gè)模塊過(guò)于龐大且比較復(fù)雜，CSS3把它分解為一些小的模塊，同時(shí)增加了一些新模塊（對(duì)應(yīng)HTML5新添的標(biāo)簽）。CSS3的模塊包括：盒子模型、列表模型、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等。

2.3 JS

即Javascript，一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類型。Javascript的作用是給HTML網(wǎng)頁(yè)添加動(dòng)態(tài)效果。事實(shí)上Adobe公司的Flash（原Macromedia公司，現(xiàn)已被Adobe收購(gòu)）也能給網(wǎng)頁(yè)帶來(lái)動(dòng)態(tài)效果；但一來(lái)不是所有的瀏覽器都自帶支持Flash的插件，二來(lái)Flash過(guò)多，瀏覽器讀取和解釋Flash會(huì)使得網(wǎng)頁(yè)瀏覽變得很慢。因此大部分網(wǎng)站很少使用Flash，而Javascript憑借著以下特點(diǎn)：

①解釋性腳本語(yǔ)言，代碼不需要進(jìn)行預(yù)編譯；

②主要用來(lái)向HTML頁(yè)面添加交互行為；

③可寫成單獨(dú)的js文件，利于結(jié)構(gòu)和行為的分離；

④具有跨平臺(tái)性，在絕大多數(shù)瀏覽器支持下，也可以在多種平臺(tái)下運(yùn)行（Windows、Linux、Mac、Android、IOS等）。

使得大部分網(wǎng)站通過(guò)使用Javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。

不同于服務(wù)器端腳本語(yǔ)言（PHP、ASP等），Javascript主要被作為客戶端腳本語(yǔ)言在用戶的瀏覽器上運(yùn)行，不需要服務(wù)器的支持。在能減少服務(wù)器負(fù)擔(dān)這一優(yōu)勢(shì)的同事，因?yàn)槭侵弊g語(yǔ)言，不需要進(jìn)行編譯，所以帶來(lái)了安全性上的問(wèn)題。隨著服務(wù)器的強(qiáng)壯，現(xiàn)在的程序員更喜歡運(yùn)行于服務(wù)器端的腳本以保證安全。但Javascript仍然以其跨平臺(tái)、容易上手等優(yōu)勢(shì)大行其道[3]。

3 Uikit的分析及其應(yīng)用

3.1 UIKit簡(jiǎn)介

UIKit是YOOtheme團(tuán)隊(duì)開發(fā)的一款輕量級(jí)、模塊化的前端框架，可快速構(gòu)建強(qiáng)大的web前端界面。為開源項(xiàng)目，基于MIT許可協(xié)議。它是完全免費(fèi)的，可無(wú)任何限制的使用、復(fù)制、合并、發(fā)布及分發(fā)這個(gè)框架。當(dāng)前版本為2.16.0（2015/1/13）。

UIKit有以下特點(diǎn)：

①提供了全面的HTML、CSS及JS組件，它們使用簡(jiǎn)單、容易定制和擴(kuò)展；

②基于LESS（一種由Alexis Sellier設(shè)計(jì)的動(dòng)態(tài)層疊樣式表語(yǔ)言）開發(fā)，代碼結(jié)構(gòu)清晰簡(jiǎn)單，易于擴(kuò)展和維護(hù)；

③體積小、反應(yīng)靈敏的響應(yīng)式組件，使用一致的、無(wú)沖突的命名規(guī)則；

④可根據(jù)UIKit基本的風(fēng)格及樣式，輕松地自定義創(chuàng)建出自己喜歡的主題樣式；

⑤可以根據(jù)不同的屏幕分辨率與上網(wǎng)設(shè)備，UIKit會(huì)自動(dòng)做出相應(yīng)，提供一致的體驗(yàn)[4]。

3.2 UIKit分析

UIKit基于LESS創(chuàng)建，LESS是一款CSS預(yù)處理器，將CSS賦予了動(dòng)態(tài)語(yǔ)言的特征，如變量、繼承、運(yùn)算、函數(shù)等。它將寫入LESS中的代碼編譯成為CSS。在官方網(wǎng)站可以直接下載UIKit框架的壓縮文件。在從官網(wǎng)（見注釋[4]）下載下來(lái)的zip壓縮文件中，你可以找到準(zhǔn)備在你的項(xiàng)目中使用的所有CSS、Javascript和字體文件。UIKit的核心框架幾乎沒(méi)有樣式，這樣做是為了保持它的精簡(jiǎn)。官網(wǎng)上提供了兩個(gè)額外的風(fēng)格樣式，一個(gè)漸變樣式和一個(gè)扁平化樣式。每個(gè)風(fēng)格樣式提供單獨(dú)的CSS文件以及壓縮后的版本。UIKit框架的文件結(jié)構(gòu)如下：