Layui 响应式布局5 个断点栅格让一套页面适配手机到宽屏【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui给官网做页面时最常见的麻烦是同一套内容在 PC 上占满整行、手机上却被挤成一条。Layui 的响应式布局把这件事收敛成一套栅格lay-row里放若干带断点前缀的列CSS 媒体查询自动按屏幕宽度换行不用为手机单独写一份页面。功能速览响应式布局覆盖哪些场景读完这节能判断你的页面该用栅格还是该自己写布局。Layui 3.0 的响应式布局 响应式栅格xs / sm / md / lg / xl 五档断点 按断点显隐的工具类lay-hide-*/lay-show-*全部是纯 CSS 类写在 HTML 里就生效不需要初始化任何 JS 模块。✅ 适用⚠️ 不适用官网、营销页、内容展示页等多端页面纯后台管理端固定侧栏用 layout.css 的大布局即可同一份 HTML 需要在手机 / 平板 / PC 都能读需要像素级定制、断点不符的场景自己写媒体查询表单、卡片按屏幕宽度调整列数追求移动版独立页面的架构那属于路由层面的事断点定义在 layout.cssxs 无下限手机兜底、sm 从 768px、md 从 992px、lg 从 1200px、xl 从 1400px 生效。快速上手最短可运行路径这节给你一份最小可用的响应式页面一个视口 meta 标签加上 xs 兜底 md 细分的列写法。meta nameviewport contentwidthdevice-width, initial-scale1 / link relstylesheet href./assets/dist/css/layui.css / div classlay-row lay-col-space16 div classlay-col-xs12 lay-col-md4卡片 1/div div classlay-col-xs12 lay-col-md4卡片 2/div div classlay-col-xs12 lay-col-md4卡片 3/div /div效果手机上三列各占满整行992px 以上自动变为一行三列。注意 3.0 的类名前缀是lay-2.x 老代码里的layui-col-*已经改掉了lay-col-space16用来给列之间留 16px 间距。实战走查一个卡片列表的断点组合假设需求是PC 一行三卡、平板一行两卡、手机单列下面四步走完。第 1 步把视口配置到位。目标让浏览器按设备真实宽度渲染而不是按桌面宽度缩小。widthdevice-width是栅格生效的前提缺了它所有断点判断都失真。仓库里 tests/visual/responsive.html 的 head 就是标准写法。第 2 步写栅格骨架。目标确定列数结构。外层lay-row负责换行和清空浮动内层每列是一个div。第 3 步给列配断点前缀。目标每列声明手机怎么排、平板怎么排、PC 怎么排。同一列上叠加多个断点类即可小屏值由 xs 兜底div classlay-row lay-col-space16 div classlay-col-xs12 lay-col-sm6 lay-col-md4卡片/div div classlay-col-xs12 lay-col-sm6 lay-col-md4卡片/div div classlay-col-xs12 lay-col-sm6 lay-col-md4卡片/div /div第 4 步按环境做差异化逻辑。目标JS 需要区分端时比如移动端收起侧栏不必自己猜 userAgentLayui 内置了设备检测layui.use(() { const device layui.device(); // device.mobile: 是否为安卓或 iOS // device.os: windows / linux / ios / mac console.log(device.mobile, device.os); });实现就在 core/lay.js 里组件内部日期面板、下拉菜单等也是用它决定交互方式的你可以放心复用。避坑对照响应式布局常见问题常见现象原因处理办法列宽类完全不生效视口 meta 没写或写成了maximum-scale1, user-scalableno之类被新版浏览器忽略的配置只保留widthdevice-width, initial-scale1手机上仍是单列md 类没反应忘了配 xs 兜底类或浏览器窗口拖得比 992px 还窄每列先写lay-col-xs*再叠lay-col-md*从 2.x 迁移后列全挤在一行2.x 的layui-col-md4在 3.0 已改名为lay-col-md4全局替换前缀跑一遍 tests/visual/responsive.html 验证device().mobile判不出来误用 2.x 的layui.mobile模块 /layui.zepto3.0 已移除改用layui.device()见 core/lay.js想按断点显隐某块内容自己写了 JS 监听 resize直接加lay-hide-xs、lay-show-sm-inline等工具类纯 CSS 即可延伸资源栅格与断点定义、显隐工具类源码src/css/modules/layout.css设备检测device()实现src/core/lay.js响应式显隐类的现成示例tests/visual/responsive.html表单在窄屏下的适配规则src/css/modules/form.css回到开头那个场景三张卡片手机上一列排到底、平板两两并排、PC 一行放完全部靠类名完成不用第二份 HTML。【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/3 10:31:34 · 阅读 1.2k Layui 响应式布局：5 个断点栅格让一套页面适配手机到宽屏
Layui 响应式布局5 个断点栅格让一套页面适配手机到宽屏【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui给官网做页面时最常见的麻烦是同一套内容在 PC 上占满整行、手机上却被挤成一条。Layui 的响应式布局把这件事收敛成一套栅格lay-row里放若干带断点前缀的列CSS 媒体查询自动按屏幕宽度换行不用为手机单独写一份页面。功能速览响应式布局覆盖哪些场景读完这节能判断你的页面该用栅格还是该自己写布局。Layui 3.0 的响应式布局 响应式栅格xs / sm / md / lg / xl 五档断点 按断点显隐的工具类lay-hide-*/lay-show-*全部是纯 CSS 类写在 HTML 里就生效不需要初始化任何 JS 模块。✅ 适用⚠️ 不适用官网、营销页、内容展示页等多端页面纯后台管理端固定侧栏用 layout.css 的大布局即可同一份 HTML 需要在手机 / 平板 / PC 都能读需要像素级定制、断点不符的场景自己写媒体查询表单、卡片按屏幕宽度调整列数追求移动版独立页面的架构那属于路由层面的事断点定义在 layout.cssxs 无下限手机兜底、sm 从 768px、md 从 992px、lg 从 1200px、xl 从 1400px 生效。快速上手最短可运行路径这节给你一份最小可用的响应式页面一个视口 meta 标签加上 xs 兜底 md 细分的列写法。meta nameviewport contentwidthdevice-width, initial-scale1 / link relstylesheet href./assets/dist/css/layui.css / div classlay-row lay-col-space16 div classlay-col-xs12 lay-col-md4卡片 1/div div classlay-col-xs12 lay-col-md4卡片 2/div div classlay-col-xs12 lay-col-md4卡片 3/div /div效果手机上三列各占满整行992px 以上自动变为一行三列。注意 3.0 的类名前缀是lay-2.x 老代码里的layui-col-*已经改掉了lay-col-space16用来给列之间留 16px 间距。实战走查一个卡片列表的断点组合假设需求是PC 一行三卡、平板一行两卡、手机单列下面四步走完。第 1 步把视口配置到位。目标让浏览器按设备真实宽度渲染而不是按桌面宽度缩小。widthdevice-width是栅格生效的前提缺了它所有断点判断都失真。仓库里 tests/visual/responsive.html 的 head 就是标准写法。第 2 步写栅格骨架。目标确定列数结构。外层lay-row负责换行和清空浮动内层每列是一个div。第 3 步给列配断点前缀。目标每列声明手机怎么排、平板怎么排、PC 怎么排。同一列上叠加多个断点类即可小屏值由 xs 兜底div classlay-row lay-col-space16 div classlay-col-xs12 lay-col-sm6 lay-col-md4卡片/div div classlay-col-xs12 lay-col-sm6 lay-col-md4卡片/div div classlay-col-xs12 lay-col-sm6 lay-col-md4卡片/div /div第 4 步按环境做差异化逻辑。目标JS 需要区分端时比如移动端收起侧栏不必自己猜 userAgentLayui 内置了设备检测layui.use(() { const device layui.device(); // device.mobile: 是否为安卓或 iOS // device.os: windows / linux / ios / mac console.log(device.mobile, device.os); });实现就在 core/lay.js 里组件内部日期面板、下拉菜单等也是用它决定交互方式的你可以放心复用。避坑对照响应式布局常见问题常见现象原因处理办法列宽类完全不生效视口 meta 没写或写成了maximum-scale1, user-scalableno之类被新版浏览器忽略的配置只保留widthdevice-width, initial-scale1手机上仍是单列md 类没反应忘了配 xs 兜底类或浏览器窗口拖得比 992px 还窄每列先写lay-col-xs*再叠lay-col-md*从 2.x 迁移后列全挤在一行2.x 的layui-col-md4在 3.0 已改名为lay-col-md4全局替换前缀跑一遍 tests/visual/responsive.html 验证device().mobile判不出来误用 2.x 的layui.mobile模块 /layui.zepto3.0 已移除改用layui.device()见 core/lay.js想按断点显隐某块内容自己写了 JS 监听 resize直接加lay-hide-xs、lay-show-sm-inline等工具类纯 CSS 即可延伸资源栅格与断点定义、显隐工具类源码src/css/modules/layout.css设备检测device()实现src/core/lay.js响应式显隐类的现成示例tests/visual/responsive.html表单在窄屏下的适配规则src/css/modules/form.css回到开头那个场景三张卡片手机上一列排到底、平板两两并排、PC 一行放完全部靠类名完成不用第二份 HTML。【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考