Layui 移动端适配实战3步搞定响应式布局10分钟从零上手【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layuiLayui 是一套轻量级 Web UI 组件库配合它内置的栅格系统和断点控制类一份页面就能在手机、平板、PC 上各自呈现最佳布局。下面从一个空白 HTML 文件出发带你从零开始搭出一个完整的响应式页面。先明确目标与适用场景最终效果页面宽度拖小多列卡片自动变单列指定元素在手机上自动隐藏全程只靠 class 名几乎不写自定义媒体查询。适用场景需要同时兼容手机、平板、PC 的官网、活动页、管理系统已有 PC 页面想低成本补上移动端适配不想引入额外响应式工具、只靠样式类控制的简单项目前置条件任意现代浏览器含手机内置浏览器layui 的样式与脚本文件可从仓库获取git clone https://gitcode.com/GitHub_Trending/la/layui无需任何构建工具HTML 文件可直接双击打开验证版本说明本仓库为 3.0 开发版class 前缀是lay-如lay-row2.x 版本前缀是layui-思路完全一致准备工作你需要这几样东西layui.css—— 核心样式所有栅格列、断点显隐类都在里面源码见src/css/index.csslayui.js—— 组件逻辑。像 popup 这类组件内部已经用lay.device()判断是否移动端自动切换touchstart/mousedown事件index.html—— 你自己的页面只需一个文件一个断点参照表—— 栅格按 5 档断点生效先记住这 5 个数字768 / 992 / 1200 / 1400单位 px后面选型全靠它分步实现4步完成响应式页面第1步添加视口 meta做什么告诉手机浏览器按设备真实宽度渲染而不是默认的虚拟宽页面。head meta charsetutf-8 / !-- 关键的一行设备宽 初始缩放1倍 -- meta nameviewport contentwidthdevice-width, initial-scale1 /head为什么缺少这行时手机浏览器会模拟约 980px 的页面宽度再整体缩小这就是手机上字特别小的根源。自检提示用手机打开页面内容应占满屏幕宽度且无横向滚动条。第2步引入样式与脚本做什么让lay-开头的响应式 class 生效。link relstylesheet hreflayui.css script srclayui.js/script为什么栅格和断点显隐类全部编译进 layui.css样式加载完成即可使用脚本则负责后续组件的交互适配。自检提示F12 打开样式面板选中任意元素应能看到lay-前缀的规则。第3步搭出三档响应式栅格做什么用 12 列栅格实现手机一列、PC 三列。div classlay-container div classlay-row !-- xs12手机上每卡占满md4≥992px 时三卡并排 -- div classlay-col-xs12 lay-col-md4卡片一/div div classlay-col-xs12 lay-col-md4卡片二/div div classlay-col-xs12 lay-col-md4卡片三/div /div /div为什么栅格每行固定 12 列xs档永远生效兜底md档只在 ≥992px 生效两档叠加就是断点切换。自检提示拖动浏览器窗口宽度三张卡片应在 992px 处发生竖排 → 横排变化。第4步按断点控制显隐 适配触摸事件做什么手机隐藏次要内容并给按钮挂上无延迟的触摸事件。!-- ≥768px 才显示次要搜索框等 -- div classlay-hide-xs仅平板和 PC 显示/div !-- 仅手机显示 -- div classlay-show-xs-inline lay-hide-md仅手机显示/div// 与 layui 源码 popup 组件同款写法移动端用触摸事件 var device layui.lay.device(); var eventName device.mobile ? touchstart : mousedown; $(.btn).on(eventName, function () { /* 你的逻辑 */ });为什么hide/show类本质是预编译好的媒体查询浏览器到对应宽度自动生效而click在部分移动浏览器上有约 300ms 延迟直接用触摸事件更跟手。自检提示缩放到 768px 以下仅平板文字消失手机点按钮应即刻响应。 真实场景演示一份个人中心页面最贴近日常的用法PC 上左侧导航 右侧内容手机上导航自动收起。div classlay-container div classlay-row div classlay-col-md3 lay-hide-xs左侧导航手机上隐藏/div div classlay-col-xs12 lay-col-md9 div classlay-row lay-col-space16 !-- 手机竖排平板(sm)起并排 -- div classlay-col-xs12 lay-col-sm6用户资料卡/div div classlay-col-xs12 lay-col-sm6数据统计卡/div /div /div /div /div三档效果手机上只剩两张竖排卡片平板上卡片横排PC 上恢复 3:9 的导航 内容布局。仓库里的tests/visual/responsive.html是一个可对照的最小示例配合浏览器开发者工具的设备模拟F12 → 切换设备工具栏即可验证全部断点行为。 选型与调优断点生效宽度常用列类典型设备xs 768pxlay-col-xs12手机永远生效做兜底sm≥ 768pxlay-col-sm6平板md≥ 992pxlay-col-md4笔记本lg≥ 1200pxlay-col-lg4台式显示器xl≥ 1400pxlay-col-xl4大屏/超宽屏三个判断原则内容顺序随屏幕变化→ 用xs12全部竖排靠 DOM 顺序控制上下只隐藏个别元素→ 优先lay-hide-xs/lay-show-md-block别手写媒体查询多卡片需要间距→ 给lay-row加lay-col-space1616px 列间距不要逐个加 margin一个页面只重点保证 2 档一般 xs md其余断点是锦上添花常见问题症状手机页面特别小、像被整体缩小了 → 检查是否加了widthdevice-width的 viewport meta这是第一优先级。症状列类在手机上不生效还是单列 → 大概率只写了lay-col-md4而md档 992px 才生效必须补lay-col-xs12兜底。症状教程里的layui-row在页面上没效果 → 你在用 3.0 版本前缀已改为lay-把layui-统一替换即可。症状想快速验证适配效果 → 用浏览器 DevTools 的设备模拟切换宽度重点核对 768 / 992 / 1200 三个数值处的布局变化。要点回顾适配的前提是 viewport meta缺它一切归零栅格永远 12 列xs兜底 md/lg切换列数显隐交给lay-hide-*/lay-show-*触摸事件用touchstart【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考