MUI-grid（柵格），超小屏xs和小螢幕sm
阿新 • • 發佈：2018-12-28
本文主要介紹grid（柵格），超小屏xs和小螢幕sm的應用。
MUI 提供了非常簡單實用的12列（是12列！！！依次為基數）響應式柵格系統。使用時只需在外圍容器上新增.mui-row，在列上新增 .mui-col-[sm|xs]-[1-12]即可。
| 尺寸 | 超小螢幕(<400px)(Extrasmall) | 小螢幕(≥400px) Small | ||
|---|---|---|---|---|
| 類字首 | .mui-col-xs-[1-12] |
.mui-col-sm-[1-12] |
||
| 可巢狀 | 是 | |||
超小螢幕(<400px)(Extrasmall)和小螢幕(≥400px) Small，單獨設定列數時，在約束條件內都有效。
1、當列數=12時，垂直排列
2、當列數<12時，水平排列，但不會撐滿整個.mui-row容器
3、當列數>12時，水平排列，包含多餘列（column）的元素將作為一個整體單元被另起一行排列
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--標準mui.css--> <link rel="stylesheet" href="css/mui.min.css"> <!--App自定義的css--> <!--<link rel="stylesheet" type="text/css" href="../css/app.css" />--> <style> </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">Grid柵格</h1> </header> <div class="mui-content"> <div class="mui-content"> <h5 class="mui-content-padded">第一種：常規示例，預設12列</h5> <div class="mui-row"> <div class="mui-col-xs-12" style="padding-right: 0px;"> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 1 </a> </li> </div> <div class="mui-col-xs-12"> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 1 </a> </li> </div> </div> <h5 class="mui-content-padded">第二種：列數<12</h5> <div class="mui-row"> <div class="mui-col-xs-4" style="padding-right: 0px;"> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 1 </a> </li> </div> <div class="mui-col-xs-4"> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 1 </a> </li> </div> </div> <h5 class="mui-content-padded">第三種：列數>12</h5> <div class="mui-row"> <div class="mui-col-xs-4" style="padding-right: 0px;"> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 1 </a> </li> </div> <div class="mui-col-xs-10"> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 1 </a> </li> </div> </div> </div> </div> <script src="js/mui.min.js"></script> <script type="text/javascript" charset="utf-8"> //mui初始化 mui.init({ swipeBack: true //啟用右滑關閉功能 }); </script> </body> </html>
4、如果對列設定了mui-col-xs-[1-12]，當螢幕 >400時，仍按照超小螢幕顯示；
但，如果對列設定了mui-col-sm-[1-12]，當螢幕 <400時，則忽略原設定，全部水平排列，如下圖：
若想超小螢幕實現自定義，需要在列上增加mui-col-xs-[1-12]，效果如下：
