AmazeUI使用了12列的響應式網絡系統。使用時需在外圍容器上添加.am-g class，在列上添加.am-u-[sm|md|lg]-[1-12] class，然后根據不同的屏幕需求設置不同的寬度。
am-u-sm-* 0-640px am-u-md-* 641px-1024px am-u-lg-* 1025px+
AmazeUI以移動優先的理念開發，若不設置大屏的網絡，應用到小屏幕的樣式會繼承到更大的屏幕上。
am-g：網格的行，用於包裹列，清楚列的浮動
am-u-xx-n：網格中的列，xx為視口區間，n為該列所占的份數
sm區間兩列是等分的，md區間為1:2划分，lg區間為1:3划分
.am-g的寬度別設置為100%，為限定最大寬度，會隨着窗口自動縮放。可以在行內添加,am-g-fixed class，將最大寬度(max-width)限制為1000px。
全寬的行 .am-container。am-container和網格列設置了相同的左右padding，可以和網格內容對齊。
網格拆分時使用了非證書百分比(100/12*n)，瀏覽器在計算的時候會有差異，最終所有列的寬度可能沒有達到100%，導致網格右側會有很小的空隙。實際使用中，若網格數不足12，需要在最后一列加上.am-u-end。
響應式布局
響應式輔助類控制元素顯隱 am-show-md-down am-hide-md-down
邊距離 am-u-sm-offset-1（1-10）
列居中 am-u-xx-centered 如 am-u-sm-centered
列不居中 am-u-xx-uncentered 如 am-u-sm-uncentered
列排序：處於SEO考慮，有時會有一些結構和表現不一致的情況，可以通過am-u-xx-push-*/am-u-xx-pull-*來實現。
移出行內邊距 am-g-collapse
AVG-Grid（均分網格） 使用ul/ol創建等分列，用於內容的排列。只能用於<ul><ol>結構。
am-avg-sm-* 0-640px
am-avg-md-* 641px-1024px
am-avg-lg-* 1024px+
*表示幾等分，而不是占12列中的幾列。
只添加.am-avg-sm-*應用於所有屏幕尺寸。
<ul class="am-avg-sm-4 am-thumbnails">
<li><img class="am-thumbnail" src="" /></li>
</ul>
九宮格
<ul class="am-avg-sm-3 boxes">
<li class="box box-1">1</li>
...
<li class="box box-9">9</li>
</ul>
水平滾動 am-scrollable-horizontal
垂直滾動 am-scrollable-vertical
清除浮動 am-cf
創建新的BFC清除浮動 am-nbfc
左浮動 am-fl
右浮動 am-fr
水平居中 am-center
垂直對齊原理是把父容器內的“幽靈”元素的高度設置為100%，再通過設置需要對齊的元素vertical-align屬性實現。
am-vertical-align 將這個class添加到父容器中，父容器需要指定高度
am-vertical-align-middle 需要垂直居中的元素
am-vertical-align-bottom 添加到需要底部對齊的元素
am-block display設置為block
am-inline display設置為block
am-inline-block display設置為inline-block
am-hide 隱藏元素
尺寸 xs：5px sm：10px default：16px lg：24px xl：32px
文本顏色 am-text-xx(primary;secondary,success,warning,danger)
鏈接顏色默認為藍色，使用am-link-muted可以將鏈接顏色設置為灰色
文字大小 am-test-xs：12px am-text-sm：14px am-text-default：16px am-text-lg：18px am-text-xl：24px am-text-xxl：32px am-text-xxxl：42px
文本對齊 am-text-left（左對齊） am-text-right（右對齊） am-text-center（居中） am-text-justify（自適應）
文本垂直對齊 am-text-top頂對齊 am-text-middle居中對齊 am-text-bottom底對齊
am-text-truncate 禁止換行，超出容器部分階段。以...結束
am-text-break 超出文字容器寬度時強制換行，主要用於英文排版
am-text-nowrap 禁止換行，不截斷超出容器寬度部分
Webkit內核的瀏覽器可以通過-webkit-line-clamp私有屬性實現多行文字截取。其他瀏覽器沒有這個屬性，通常做法是把容器的高度限定為行高*顯示的行數，超出的部分隱藏。
.line-clamp {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 這里修改為要顯示的行數
-webkit-box-orient: vertical;
}
CSS Image Replacement，圖片替換計算兼顧顯示效果、可仿性、SEO。使用am-text-ir class結合背景圖片實現圖片替換
使用float實現類似html的align屬性的效果，父容器要清楚浮動。與.am-fl、am-fr相比，浮動的元素添加了margin。am-align-right am-align-left
調整瀏覽器窗口大小查看元素的顯隱 am-[show|hide]-[sm|md|lg][-up|-down|-only]
am-show-sm-only 只在sm區間顯示
am-show-sm-up 大於sm區間時顯示
am-show-md-down 小於sm區間時顯示
am-show-sm 在sm區間顯示
橫屏 am-show-landscape am-hide-landscape
豎屏 am-show-portrait am-hide-portrait