简说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 列的响应式网格系统的划分区间

 

区间段说明

 

转载于:https://www.cnblogs.com/wjh0916/p/4939534.html