Amazeui框架 网格布局计算理解

admin

固定容器 .am-container 宽度

1. .am-container {
   
2.   width: 980px !important;
   
3.   max-width: none;
   
4. }

复制代码

所有代码下载.am-container 之内




例子：需求：页面宽度为：1000px; 容器与容器之间的左右边距为10px；
则需要设置页面的宽度为1000px+10px=1010px;
需要设置css样式：

1. .am-g-fixed {
   
2. max-width: 1010px;
   
3. }

复制代码

1. @media only screen and (min-width:641px) {
   
2. [class*="am-u-"] {
   
3. padding-left: 5px;
   
4. padding-right: 5px;
   
5. }
   
6. }

复制代码

代码例子：

1. <div class="am-g">
   
2. <div class="am-u-sm-6">
   
3. <div class="...">...</div>
   
4. </div>
   
5. <div class="am-u-sm-6">
   
6. <div class="...">...</div>
   
7. </div>
   
8. </div>

复制代码

行 .am-g 宽度为100%
am-u-sm-* 代表列容器
可以将div写在列容器里面

1. <div class="am-g am-g-fixed">
   
2. <div class="am-u-sm-6">
   
3. <div class="...">...</div>
   
4. </div>
   
5. <div class="am-u-sm-6">
   
6. <div class="...">...</div>
   
7. </div>
   
8. </div>

复制代码

设置行容器 .am-g-fixed 可以固定行的宽度

移动设备优先：

[td]

Class	区间
am-u-sm-*(移动设备)	0 - 640px
am-u-md-*（普通屏幕）	641px - 1024px
am-u-lg-*（大屏幕）	1025px +

.am-g 表示行
.am-u-xx-n 表示列
一行中最多能有12列
如果不是12份的网格，应该在最后一列上添加.am-u-end
在am-g 上添加 am-g-collapse 则可以移除列的内边距

admin

手机回复！