semancti-ui介紹
semantic-ui是html/css框架的新貴，是繼bootstrap和foundation之后的又一css神器。semantic-ui一出現在github上就受到火熱的關注，一直在關注排行榜前列。semantic-ui最大的特點：充分利用CSS3動畫特效，簡潔實用漂亮的樣式這些都是其最受歡迎的原因之一。
扁平化設計
隨着iOS 7的發布，扁平化設計(flat design)被更多人所熟識。什么是扁平化設計呢？在實際當中，扁平化設計一詞所指的是拋棄那些已經流行多年的漸變、陰影、高光等擬真視覺效果，從而打造出一種看上去更“平”的界面。扁平風格的一個優勢就在於它可以更加簡單直接的將信息和事物的工作方式展示出來，減少認知障礙的產生。
在主流的css框架bootstrap中，開始是不支持扁平化設計的（bootstrap2），但在最新的bootstrap3中，幾乎所有的組件都改用了扁平化的設計，但由於設計的不好，3的版本被很多原使用bootstarp的開發所詬病。
而semantic-ui是天生就是扁平化的設計，讓人用起來更加覺得時尚、簡潔。
響應式設計
什么是響應式設計？響應式Web設計(Responsive Web design)的理念是，頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備;換句話說，頁面應該有能力去自動響應用戶的設備環境。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
在semantci-ui的官網里面是這樣說的：
Every component is defined using em and rem so that components can be resized simply on the fly. Want a menu to get smaller on mobile? Simply have it’s font-size change using a media query.
semantic-ui的每個組件都是使用“em”和“rem”，所以組件可以在不同的顯示設備上自動地調整大小。
semantic-ui兼容性
支持的瀏覽器如下
- Last 2 Versions FF, Chrome, IE (aka 10+)
- Safari 6
- IE 9+ (Browser prefix only)
- Android 4
- Blackberry 10
前幾天在semantic-ui的github項目里提了個問題，問semantic-ui是否支持IE6～8，下面有個老外來了句：Support IE6? Are you creazy?呵呵，看來在國外還是不鳥IE的偏多。
在這里吐槽一下IE，IE可以算是瀏覽器界的一朵奇葩…不對，奇葩還有些褒意在里面，應該是瀏覽器界的一個毒瘤，一直阻礙着前端框架的發展，好在現在很多前端框架都不care IE了，比如angularjs，bootstrap等就直接只支持IE8+（不包括IE8），就連鼎鼎大名的Jquery也宣布從2.x版本開始不支持IE6～8，看來IE的淘汰是在所難免了哈。
不過IE9以后情況還是有所好轉，《Javascript高級程序設計》的作者 Nicholas C. Zakas也讓大家對IE9以后的版本可以另眼相看。但不管怎么樣，IE6～8的各種bug和不兼容讓web前端開發舉步維艱是個不爭的事實，該淘汰的時候就應該淘汰。最好的做法讓用戶升級瀏覽器或改用chrome，不要在兼容性上面浪費精力。
semantic-ui示例
剛剛進入到semantci-ui的網站的時候，就被它的各種控件樣式吸引住了，感覺比bootstrap好看很多，又很符合當前流行的“扁平化設計”的風格,這里列一下幾個看起來比較酷的控件。
好看的按鈕
代碼如下
1 2 3 4 5 |
|
好看的標簽
Pretty nice animals.
Also pretty nice animals, but can prefer solitude.
Never seen one as a pet before, but I imagine they’d make pretty terrible companions.
代碼如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
好看的注解
代碼如下
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
是不是非常酷？想使用這些很酷很炫的特性，就趕快使用semantic-ui吧～