MUI-grid（栅格），超小屏xs和小屏幕sm

本文主要介绍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]，效果如下：

MUI-grid（栅格），超小屏xs和小屏幕sm相关推荐

为什么android没有小屏手机,为什么小屏幕的安卓手机越来越少见了？
欢迎转载,请注明出处,抄袭必究! 不知道大家有没有发现,现在市场上推出的手机越来越趋向于大屏,而小屏手机却越来越少见了.想当年,人们希望将机器变得更小些.让它更加方便使用,现在却开始反其道而行了,这究 ...
屏幕小于6英寸的手机_不喜大屏幕，这两款2019年6英寸以下小屏手机你感兴趣吗？...
不知道什么时候开始,主流手机屏幕设计得越来越大,虽然大屏幕好处多多,但是弊端也不少.在如今手机屏幕面板都基本超过6英寸的情况下,有不少人渴望找到一款小屏手机来使用.在过去的2019年里,手机厂商发布了 ...
小屏隐藏大屏幕显示css,CSS 侧边栏在小屏设备中进行隐藏
Unsplash 侧边栏的作用应该就不用多说了吧,能够很方便我们回到网页的指定位置,在大屏设备中,侧边栏往往是悬浮于屏幕右侧,很方便用户的使用,但在小屏设备中,屏幕空间有限,所以我们会通过隐藏侧边栏的 ...
android小屏手机,2019年，期待一款小屏手机
2018年已经接近尾声,对于手机产品而言,今年是全面屏手机突飞猛进的一年,我们看到了vivo NEX和OPPO Find X精致的机械结构,也看到了荣耀Magic 2和小米MIX 3的出色的滑盖体验以 ...
为什么android没有小屏手机,为什么安卓手机做不出类似于iphoneSE那样的小屏旗舰？...
我还真告诉你,不是做不出,而是做出来了并没有多少人喜欢,或者说小屏幕真的到现在只是一个小众的市场,也许iPhone se只是因为是苹果才被大多数人所知道,不得不承认,苹果的品牌影响力. 给你介绍一下我 ...
虚拟桌面分屏_桌面中的灭霸三星C49HG90 32:9超带鱼屏体验
本文作者:dpgisdpg 前言参加一起Show桌面活动,顺便搞定之前未做的三星C49HG90DMC显示器开箱作业. 搭建一套美如画的桌面,工程堪比"复仇者联盟",不但需要足够的 ...
oracle12 se1和se2,小屏手机的巅峰对决：iPhone12mini和iPhoneSE2，谁更适合你？
小屏手机的巅峰对决:iPhone12mini和iPhoneSE2,谁更适合你? 2021-02-07 20:33:29 9点赞 9收藏 20评论创作立场声明:个人看法,不喜勿喷在当下市场上,小屏手 ...
【Ant Design Vue】之Grid栅格和Space间距
文章目录 Grid 栅格 Space 间距 Grid 栅格 Ant Design Vue 将整个设计建议区域按照 24 等分的原则进行划分,划分之后的信息区块我们称之为『盒子』.建议横向排列的盒子数量 ...
小屏手机大势已去！iPhone 12 Pro Max被买空mini居然还有货
继iPhone 12和iPhone 12 Pro上市之后,日前超小杯的iPhone 12 mini和超大杯的iPhone 12 Pro Max也正式同步开启预售,并且再一次展现"开卖变真香& ...

MUI-grid（栅格），超小屏xs和小屏幕sm

MUI-grid（栅格），超小屏xs和小屏幕sm相关推荐

最新文章

热门文章