手機html5開發,大部分都使用現有的框架,這裡簡單比較幾個流行的ui 框架。作者(啟明星工作室 比較一下幾款流行的html5框架,個人意見,僅供參考。
(1)mui
**:
優點:mui是數字dclound推出的一款流行框架,個人感覺,這是目前最好的乙個h5 ui框架,使用簡單,操作方便。
缺點:mui為了達到原生效果,重新定義了form表單裡input,select,textarea所有的樣式,這給使用者自定義樣式帶來的不便。
例如下圖左圖是mui裡,直接使用標籤,是沒有下拉箭頭的,這會讓使用者迷惑。
右圖,我們可以在html**裡,重新定義select讓其顯示。}
其實,我在用bootstrap時,到想起當時bootstrap開發人員在定義table時的一句話,他們說他們本可以通過css重寫table,但是,因為有些**需要原始的table樣式,所以,為了和前者相容,他們方式了
通過全域性css改變table預設樣式,如果開發人員像使用bootstrap的table樣式,只要增加 就可以了,這樣,既不增加多少工作量,又能相容過去的程式。
我認為這點值得mui借鑑。
**:更主要的是,其css名稱與其他h5框架完全不一樣,以簡單的面板為例,公認的命名方式為:
class="但weui的命名類似如下:header縮寫成了hd,body所寫成了bd,類的名稱,你叫做page__title也沒問題,問題是page和title之間是2個下劃線,而有些採用類名稱採用:中劃線和下劃線一起用。panel
">
class="
panel panel-header
">標題
class="
panel panel-body
">主體
如weui-cell__hd。當你大量編寫頁面時,你腦子裡會不停的切換想著weui類到底叫什麼名字。
class="weui還有乙個致命缺點:多乙個span或者div都可能使得你的樣式完全失效。例如如下,可能僅僅在body與tab__hd之間多了乙個div,就會導致你頁面失效。page panel
">
class="
page__hd
">
class="
page__bd
">
class="
weui-cell
">
class="
weui-cell__hd
">class="
weui-label
">手機
class="
weui-cell__bd
">
class="
weui-input
" id="
mobile
" >
class=tab__hd>(3)jquery mobile和class=tab__hd>
**:優點:這應該是最早的html5框架,
缺點:jquery雖然很流行,但是不得不說jquerymobile是乙個失敗的作品。現在好像都停止更新了。jm最大的缺點是速度太慢。
這也難怪,瀏覽器支援的是css與js,但是jm通過自定義很多data-*來重寫渲染最終的樣式,
例如如下**的 data-enhanced,data-icon,這些data-*屬性,瀏覽器並不能識別,需要jm的js引擎解釋後,轉換為css語言,
當頁面大量使用這些data-*屬性時,其效能極具下降,現在應該沒什麼人使用了。
<(4)bootstrapinput
type
="button"
data-enhanced
="true"
value
="enhanced - left"
>
<
input
type
="button"
data-icon
="delete"
value
="left (default)"
>
**:優點:相容pc和手機,其推出的理念與樣式,啟發了很多後起之秀,例如將頁面分成12份,根據解析度不同,自動組合燈。在pc樣式上,具有不可替代的作用。
缺點:也正因為他需要相容pc和手機,使得雖然pc樣式很優秀,但是手機效果只能說是「中規中矩」,畢竟「又想馬兒跑得快,又想馬兒不吃草」是不現實的。
(5)framework7
**:沒用過,但是看起來還不錯,值得推擠。
(6)amaze ui
**:沒用過,其實amaze有 基於 react.js 的移動端 web 元件庫 因為是基於react.js的,感覺入門門檻挺高
(7)layui
** layer目前人氣極具上公升,不過她還是偏重於pc
較為流行的幾款前端框架
較為流行的幾款前端框架 1.jquery ui 2.bootstrap 優點 1.bootstrap 框架在布局 版式 控制項 特效方面都非常讓人滿意,都預置了豐富的效果,極大方便了使用者開發。2.這個目前好像很火似滴 3.微軟發布的vs2013正式版中,也已經將bootstrap3.0的版本加入了...
幾款ReactJS最優秀的UI框架
一.material ui material ui是一款react元件庫來實現google的material design風格ui介面框架。也是首個react的ui工具集之一。使用它可以快速搭建出賞心悅目的應用介面。英文文件 中文文件 github 二.react bootstrap react b...
HTML 5 GAME的幾款小遊戲例子推薦
html5 時代就要來了,連game也很多開始往html5上轉移,html5 game有幾個好處 1 跨平台瀏覽器 2 不用安裝 3 編寫維護快,容易 當然目前還有些問題,比如版權保護,渲染速度等,下面是幾個不錯的網上的小例子遊戲程式 1 是個迷宮的效果 2 webgl的小game,3d的 3 乙個...