★ FEATURED ARTICLE 1. 为什么 MUI 布局值得单独拎出来讲做 HTML 应用开发尤其是面向移动端的 Web 应用布局永远是最先碰到的硬骨头。很多人刚上手 MUI 的时候觉得它就是个 CSS 框架把 class 往标签上一贴就完事了。结果真到项目里顶部导航栏和内容区打架、侧滑菜单把页面撑出横向滚动条、栅格在 iPhone SE 和 iPad 上表现完全两回事——这些问题一冒出来才发现 MUI 的布局体系不是“贴 class”那么简单。MUI 的布局核心其实就三块容器与栅格系统、固定定位的工具栏与导航、flex 驱动的内部对齐。这三块拼在一起构成了移动端页面从骨架到血肉的完整方案。我见过不少项目前期用 MUI 快速搭出原型后期因为布局没吃透改一个间距要动五个文件最后干脆推翻重写。所以这篇内容我想把 MUI 布局里那些文档写得含糊、但实际项目里天天用的东西掰开揉碎讲清楚。这篇适合谁看如果你已经写过基本的 HTML 和 CSS知道display: flex大概是怎么回事但用 MUI 做页面时总觉得“差那么点意思”那这篇就是给你准备的。我会从整体设计思路讲到具体参数计算再到实际项目里踩过的坑尽量做到你看完就能直接抄作业。2. MUI 布局的整体设计思路拆解2.1 移动优先不是口号是布局的起点MUI 从设计之初就是移动优先Mobile First的。这句话听起来像废话但很多人在写布局时会不自觉地按桌面思维来先想大屏怎么排再想小屏怎么缩。MUI 的逻辑正好反过来——默认样式就是给小屏用的大屏的适配靠断点类去覆盖。举个例子MUI 的栅格系统里mui-col-xs-12表示在超小屏手机上占满 12 列也就是整行。如果你不加任何其他断点类那这个元素在所有屏幕尺寸下都是整行。但如果你写了mui-col-xs-12 mui-col-sm-6意思就是手机上一行一个小屏及以上一行两个。这种“从小到大”的覆盖逻辑和 Bootstrap 那套是一致的但 MUI 的断点划分更贴近移动设备的实际宽度分布。MUI 默认的断点值是这样的断点前缀含义适用设备典型宽度xs超小屏手机竖屏 768pxsm小屏手机横屏/小平板≥ 768pxmd中屏平板≥ 992pxlg大屏桌面显示器≥ 1200px这个断点体系和 Bootstrap 3 是一样的因为 MUI 本身就参考了 Bootstrap 的栅格思路但针对移动端做了大量优化。实际项目里xs 和 sm 这两个断点用得最多md 和 lg 在纯移动应用里几乎用不到除非你要做平板适配。注意MUI 的断点判断是基于min-width的也就是说mui-col-sm-6在 768px 及以上都会生效包括 1200px 的大屏。如果你想让某个布局只在平板区间生效得配合mui-col-md-*去覆盖而不是指望 sm 自动失效。2.2 容器、行、列的三层结构为什么不能省MUI 的栅格系统遵循“容器 行 列”的三层结构这和 Bootstrap 一模一样。很多人觉得这层嵌套太啰嗦直接把列塞进容器里结果就是间距错乱、换行异常。为什么不能省因为这三层各自承担了不同的职责容器.mui-container负责控制内容的最大宽度和水平内边距。MUI 的容器默认有 15px 的左右 padding这个值是为了防止内容贴边在手机上尤其重要。行.mui-row负责抵消容器的 padding同时通过负 margin 让列之间的间距gutter均匀分布。MUI 默认的 gutter 是 15px也就是列左右各 15px 的 padding。列.mui-col-*负责实际的宽度分配和内容承载。如果你跳过“行”这一层直接把列放进容器列的 padding 会和容器的 padding 叠加导致内容区域比预期窄 30px。在手机上30px 的差距足以让一个按钮从“刚好放下”变成“换行显示”。我自己的习惯是写 MUI 布局时先把这三层骨架敲出来再往里填内容。哪怕是一个简单的两栏布局也老老实实写div classmui-container div classmui-row div classmui-col-xs-6左侧内容/div div classmui-col-xs-6右侧内容/div /div /div这多出来的两行代码换来的是后续调整间距时不用到处救火。2.3 固定定位与滚动区域的边界处理移动端应用和普通网页最大的区别之一就是顶部导航栏和底部工具栏通常是固定的中间内容区独立滚动。MUI 提供了.mui-bar、.mui-bar-nav、.mui-bar-tab这些类来实现固定栏但很多人第一次用的时候会发现内容区被导航栏遮住了。原因很简单固定定位的元素脱离了文档流不会占据空间。所以你需要给内容区加一个上边距或下边距把被遮住的部分让出来。MUI 的做法是给.mui-content加 padding.mui-content { padding-top: 44px; /* 顶部导航栏高度 */ padding-bottom: 50px; /* 底部选项卡高度 */ }这两个数值不是随便写的。MUI 默认的导航栏高度是 44px底部选项卡高度是 50px。如果你自定义了导航栏高度比如加了副标题变成 64px那 padding-top 也要同步改成 64px。这个对应关系必须手动维护MUI 不会自动帮你算。实操心得我习惯在项目里定义一个 CSS 变量或者 Less 变量来存这两个高度值导航栏和内容区的 padding 都引用同一个变量。这样改高度的时候只需要改一处不会出现“导航栏改了、内容区没改”的低级错误。3. 栅格系统的核心细节与参数计算3.1 12 列网格的分配逻辑与常见误区MUI 的栅格系统把每一行分成 12 列这个数字不是随便选的。12 可以被 2、3、4、6 整除意味着你可以轻松实现两等分、三等分、四等分、六等分灵活性最高。相比之下如果分成 10 列三等分就除不尽了。列宽的计算公式很简单单列宽度 (容器宽度 - 列间距总和) / 12但实际使用中你不需要手动算这个MUI 的百分比宽度已经帮你算好了。mui-col-xs-6就是 50%mui-col-xs-4就是 33.333%mui-col-xs-3就是 25%。这些百分比是相对于行的宽度而行又通过负 margin 抵消了容器的 padding所以最终列的实际宽度是符合预期的。常见的误区有三个误区一列数加起来超过 12。比如一行里放了mui-col-xs-8和mui-col-xs-6加起来 14。MUI 的处理方式是让第二个列换行而不是压缩宽度。这会导致布局错乱但不会报错所以很容易被忽略。误区二忘记加断点前缀。只写mui-col-6是不生效的MUI 没有默认的列类必须带断点前缀比如mui-col-xs-6。误区三在列里面直接嵌套列没有加行。虽然浏览器可能渲染出你想要的效果但间距会出问题。正确的做法是在列里面再放一个.mui-row然后再放子列。3.2 列间距Gutter的调整方法与影响范围MUI 默认的列间距是 15px也就是每个列左右各有 15px 的 padding。这个值在手机上看起来还行但在平板或桌面上可能显得太窄。如果你想调整间距有两种方式方式一修改行的负 margin 和列的 padding。比如你想把间距改成 20px需要这样写.mui-row { margin-left: -20px; margin-right: -20px; } .mui-col-xs-6 { padding-left: 20px; padding-right: 20px; }注意行的负 margin 必须和列的 padding 保持一致否则会出现横向滚动条或者内容贴边。方式二使用 MUI 提供的间距类。不过 MUI 本身的间距类比较有限实际项目里我更推荐方式一因为可控性更强。注意调整 gutter 会影响所有使用该行和列的布局所以最好在项目的全局样式里统一改而不是在某个页面里局部改。局部改容易导致不同页面的间距不一致视觉上很乱。3.3 响应式列的实际项目配置案例假设你要做一个商品列表页手机上一行两个商品平板上一行三个桌面上一行四个。用 MUI 的栅格可以这样写div classmui-container div classmui-row div classmui-col-xs-6 mui-col-sm-4 mui-col-md-3 div classproduct-card商品 1/div /div div classmui-col-xs-6 mui-col-sm-4 mui-col-md-3 div classproduct-card商品 2/div /div !-- 更多商品... -- /div /div这里的逻辑是mui-col-xs-6手机上一行两个12/62mui-col-sm-4小屏及以上一行三个12/43mui-col-md-3中屏及以上一行四个12/34因为断点是 min-width 覆盖所以在大屏上md 的 3 会覆盖 sm 的 4最终生效的是一行四个。这个配置在实际项目里非常常用基本上改改数字就能套用到各种列表场景。4. 固定栏与内容区的实操配置4.1 顶部导航栏的高度计算与内容区避让MUI 的顶部导航栏默认高度是 44px这个值在 iOS 和 Android 上都是比较标准的。但实际项目里导航栏往往不止一行——可能上面是标题下面是搜索框或者选项卡。这时候高度就要重新算。假设你的导航栏结构是这样的header classmui-bar mui-bar-nav h1 classmui-title页面标题/h1 div classmui-input-row mui-search input typesearch placeholder搜索 /div /header标题行大约 44px搜索框大约 40px加上一些 padding总高度可能在 90px 左右。这时候内容区的 padding-top 就要设成 90px否则搜索框会被内容遮住。我的做法是在导航栏渲染完成后用 JavaScript 动态获取它的实际高度然后设置内容区的 paddingvar navHeight document.querySelector(.mui-bar-nav).offsetHeight; document.querySelector(.mui-content).style.paddingTop navHeight px;这样做的好处是不管导航栏内容怎么变内容区都能自动避让。缺点是需要在页面加载完成后执行可能会有短暂的闪烁。如果追求极致体验可以在 CSS 里先写一个预估高度再用 JS 修正。4.2 底部选项卡的固定与滚动冲突处理底部选项卡.mui-bar-tab的默认高度是 50px固定在页面底部。内容区需要加padding-bottom: 50px来避让。但这里有一个容易被忽略的问题当页面内容不足一屏时底部选项卡会浮在内容下方而不是贴在屏幕底部。这是因为固定定位是相对于视口的如果内容区高度不够选项卡仍然在视口底部但内容区下面会有一块空白。解决办法是给内容区设置一个最小高度.mui-content { min-height: calc(100vh - 44px - 50px); }这样即使内容很少内容区也会撑满剩余空间选项卡看起来就是贴在底部的。另一个常见问题是在 iOS 上当键盘弹出时固定定位的底部选项卡会被顶上去遮挡输入框。MUI 本身没有很好的解决方案我的做法是在输入框获得焦点时隐藏底部选项卡document.querySelector(input).addEventListener(focus, function() { document.querySelector(.mui-bar-tab).style.display none; }); document.querySelector(input).addEventListener(blur, function() { document.querySelector(.mui-bar-tab).style.display flex; });这个方案不完美但实测下来比让选项卡遮挡输入框要好得多。4.3 侧滑菜单的布局层级与 z-index 管理MUI 的侧滑菜单off-canvas是通过.mui-off-canvas-wrap来实现的。它的布局层级是这样的.mui-off-canvas-wrap最外层容器负责包裹整个页面.mui-inner-wrap内层容器承载主内容.mui-off-canvas-left/.mui-off-canvas-right侧滑菜单侧滑菜单默认是隐藏的通过添加.mui-active类来显示。这里的关键是z-index 的管理。MUI 默认给侧滑菜单设置了较高的 z-index但如果你的页面里有其他固定定位的元素比如自定义的弹窗可能会出现层级冲突。我的经验是在项目里统一管理 z-index定义一个层级表元素z-index普通内容1固定导航栏100侧滑菜单200弹窗遮罩300弹窗内容400MUI 默认的 z-index 值可能和这个表不完全一致但你可以通过覆盖 CSS 来统一。这样做的好处是后续加新元素时直接查表分配 z-index不会出现“这个弹窗怎么被导航栏遮住了”的问题。5. 常见布局问题与排查技巧实录5.1 横向滚动条出现的五种原因与修复横向滚动条是 MUI 布局里最常见的问题没有之一。我总结下来原因主要有五种原因一行的负 margin 没有被子元素的 padding 抵消。比如你给行设了margin-left: -15px但列没有设padding-left: 15px行就会超出容器产生横向滚动。原因二固定宽度元素超出容器。比如你放了一个width: 100vw的元素vw 包含了滚动条的宽度在桌面浏览器上会超出。原因三绝对定位元素超出边界。绝对定位是相对于最近的定位祖先如果祖先没有设置overflow: hidden超出部分就会撑出滚动条。原因四图片没有设置最大宽度。大图在手机上会撑破容器加上max-width: 100%就能解决。原因五flex 容器的子元素没有设置min-width: 0。这是 flex 布局的经典坑子元素内容过长时不会收缩导致容器被撑开。排查的时候我习惯用 Chrome DevTools 的“Elements”面板逐个检查元素的盒模型看哪个元素的宽度超出了视口。通常几分钟就能定位到问题。5.2 栅格换行异常的调试步骤栅格换行异常通常表现为本该在一行的列莫名其妙换到了下一行。排查步骤是这样的检查列数总和。把一行里所有列的mui-col-xs-*数字加起来看是否超过 12。检查是否有隐藏元素占位。有时候一个display: none的列仍然占据栅格位置导致后面的列换行。检查是否有 margin 或 padding 撑开。如果列里面放了带 margin 的元素可能会把列撑宽导致换行。检查断点覆盖。比如你写了mui-col-xs-6 mui-col-sm-4在 sm 断点下如果一行里有三个这样的列加起来是 12刚好一行。但如果有一个列只写了mui-col-xs-6在 sm 下仍然是 6加起来就超过 12 了。实操心得我习惯在开发阶段给所有列加一个临时边框比如outline: 1px solid red这样一眼就能看出列的边界和换行情况。上线前再去掉。5.3 固定栏遮挡内容的快速定位方法固定栏遮挡内容本质上是内容区的 padding 不够。快速定位的方法是在 DevTools 里选中内容区的第一个元素看它的顶部是否被导航栏覆盖。选中导航栏看它的offsetHeight是多少。对比内容区的padding-top如果小于导航栏高度就是这个问题。修复方法前面已经讲过要么写死 padding要么用 JS 动态计算。我个人的建议是如果导航栏高度是固定的直接写死 padding 更简单如果导航栏高度会变比如有搜索框展开收起那就用 JS 动态算。5.4 常见问题速查表问题现象可能原因排查方法修复方案横向滚动条行负 margin 未抵消检查行和列的 margin/padding给列加对应 padding栅格换行列数总和超过 12累加列数字调整列宽或减少列数内容被遮挡内容区 padding 不足对比导航栏高度和 padding增加 padding 或用 JS 动态设置底部选项卡浮空内容区高度不足检查内容区 min-height设置 min-height 为视口高度减去固定栏高度侧滑菜单层级错误z-index 冲突检查各元素 z-index统一管理 z-index 层级表iOS 键盘顶起底部栏固定定位特性在 iOS 真机上测试输入框聚焦时隐藏底部栏6. 布局优化的几个实战技巧6.1 用 flex 替代浮动实现更稳定的对齐MUI 的栅格是基于浮动的这在大多数情况下没问题但在某些场景下浮动会带来额外的麻烦。比如你想让一行里的列垂直居中对齐用浮动就很难实现得靠line-height或者vertical-align去凑。而用 flex 就简单得多.mui-row { display: flex; align-items: center; }这一行代码就能让所有列垂直居中。不过要注意一旦把行改成 flex 容器列的百分比宽度计算方式会变因为 flex 容器里的子元素默认是 flex item宽度由 flex 属性决定而不是百分比。所以如果你要用 flex列的宽度类可能就不生效了需要手动设置flex属性。我的做法是对于简单的等分布局直接用 flex 写不套 MUI 的栅格类对于复杂的响应式布局还是用 MUI 的栅格因为断点覆盖更方便。6.2 减少重排固定栏用 transform 替代 top 动画如果你想让固定栏在滚动时隐藏或显示不要用top属性做动画因为top会触发重排性能很差。用transform: translateY()更好因为它只触发重绘不触发重排。.mui-bar-nav { transition: transform 0.3s; } .mui-bar-nav.hidden { transform: translateY(-100%); }这个技巧在长列表页面特别有用滚动时隐藏导航栏给内容更多空间滚动停止后再显示出来。6.3 用 CSS 变量统一管理布局尺寸前面提到过导航栏高度、底部栏高度、列间距这些值最好用 CSS 变量统一管理:root { --nav-height: 44px; --tab-height: 50px; --gutter: 15px; } .mui-content { padding-top: var(--nav-height); padding-bottom: var(--tab-height); } .mui-col-xs-6 { padding-left: var(--gutter); padding-right: var(--gutter); }这样改一处全局生效。而且 CSS 变量在 DevTools 里可以直接调试改完立刻能看到效果比改 Less/Sass 变量再编译快得多。6.4 真机测试的必要性与常见差异MUI 布局在浏览器里看起来没问题不代表在真机上没问题。我遇到过好几次Chrome 模拟器里完美到了真机上就错位。常见的差异有iOS 的安全区域iPhone X 及以上机型有底部横条固定栏需要加padding-bottom: env(safe-area-inset-bottom)。Android 的字体缩放用户可能在系统设置里调大了字体导致布局错乱。解决办法是用rem而不是px来定义字体大小或者设置-webkit-text-size-adjust: 100%。不同浏览器的 flex 实现差异虽然现在主流浏览器对 flex 的支持已经很好了但在一些老旧的 Android 机型上仍然有兼容性问题。所以布局写完一定要在真机上过一遍至少覆盖 iOS 和 Android 各一台设备。7. 我个人在实际项目中的体会MUI 的布局体系说复杂也复杂说简单也简单。复杂在于它的细节很多断点、栅格、固定栏、侧滑菜单每一块都有坑简单在于只要你理解了“移动优先”和“三层结构”这两个核心大部分问题都能自己推导出答案。我刚开始用 MUI 的时候最喜欢干的事就是复制粘贴文档里的示例代码然后改改文字就上线。结果就是一旦需求稍微变一点比如导航栏要加个搜索框整个布局就崩了。后来我强迫自己每次写布局前先在纸上画一下结构哪些是固定的哪些是滚动的哪些需要响应式变化。画清楚了再写代码返工率大大降低。还有一个体会是不要过度依赖框架。MUI 的栅格很好用但不是所有布局都适合用栅格。有些简单的两栏布局直接用 flex 写更简洁也更好维护。框架是工具不是枷锁。最后分享一个小技巧如果你在调 MUI 布局时卡住了不妨把 MUI 的 CSS 文件暂时注释掉看看裸 HTML 的布局是什么样的。很多时候问题不是出在你的代码上而是 MUI 的默认样式在“捣乱”。找到默认样式的来源覆盖它问题就解决了。这个思路在我处理固定栏遮挡、栅格换行这些问题时屡试不爽。
阅读完成 · 觉得有帮助？
