簡說amaze UI框架的柵格


 陰天還淅淅瀝瀝下着秋雨,這樣的天氣最適合待被窩里睡大覺,但是想想請一天假一星期的生活費就沒了,盡管兩個月都沒發工資,還是強撐着爬起來,跟打仗似的穿衣、洗臉......嘻嘻,其實吾還是很珍惜時間滴(就裝吧),回神了言歸正轉~~

-----------------------------------以下是正文--------------------------------------

   對於學習一些知識點兒,我不希望自己把一些東西從一個地方搬到另一個地方,而是有體會能探索到其中奧妙,即使可能是錯的,也是屬於自己滴,今天就略記Amaze UI框架。

Amaze ui框架    官網http://amazeui.org/

Amaze UI框架是個開源 HTML5 跨屏前端框架,以移動優先為理念。

一、移動優先

  “移動優先”對於參與開發人員並不陌生,但是真正了解這個詞嗎。

   Amaze UI以移動端優先開源框架,表現在這幾個方面:

  1,柵格划分的比較清晰,響應式斷點更符合移動端,其響應式斷點如下:

 

Bootstrap 的柵格系統響應式斷點:

 

通過比較,個人認為對於移動端開發amaze UI框架更適合,雖然Bootstrap框架中也強調移動優先。

2, .am-u-xx-centered 實現列居中時,如果始終的設為居中,只需要添加 .am-u-sm-centered(移動優先,繼承);

某些區間不居中添加, .am-u-xx-uncentered;

<!-- .am-u-sm-centered 始終居中 -->

<div class="am-g">

  <div class="am-u-sm-3 am-u-sm-centered">3 centered</div>

</div>

.am-u-sm-centered 始終居中,這本來是在區間【0-640px】實現居中,移動優先,對於不同的設備以移動為主實現。

二、柵格說明

Amaze UI的12 列的響應式網格系統的划分區間

 

區間段說明

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM