BootMetro 响应式设计全解3 档媒体查询断点让 Metro 应用适配任意屏幕【免费下载链接】bootmetroSimple and complete web UI framework to create web apps with Windows 8 Metro user interface, based on Bootstrap 2.项目地址: https://gitcode.com/gh_mirrors/bo/bootmetroBootMetro 是基于 Bootstrap 2 的 Windows 8 Metro 风格 Web UI 框架内置一套完整的响应式设计机制通过 3 档核心媒体查询断点1200px、979px、767px加一个 480px 补充断点让同一套 Metro 页面在桌面、平板和手机上自动切换布局无需手写一行媒体查询。 3 档媒体查询断点一览BootMetro 的响应式能力集中在 less/responsive.less 中它把三档断点各自拆成独立文件按需引入断点适用设备源码文件min-width: 1200px大桌面显示器less/responsive-1200px-min.less768px ~ 979px平板 / 小桌面less/responsive-768px-979px.lessmax-width: 767px手机 / 竖屏平板less/responsive-767px-max.less另有两处配套断点值得了解max-width: 480px更窄的手机屏幕优化表单、媒体对象和轮播体验见 less/responsive-767px-max.lessmax-width: 979px导航栏折叠导航菜单收起为汉堡按钮宽度阈值由 less/variables.less 中的navbarCollapseWidth变量控制可按需修改。 小屏≤767px下 BootMetro 自动做了哪些事这是新手最关心的一档less/responsive-767px-max.less 内的规则可归纳为四类全部自动生效网格退化为单列所有.span*列自动变成 100% 宽的块级元素并垂直堆叠横向滚动消失表单控件撑满带span*类的input、select、textarea自动变成块级全宽输入框单手填写更友好弹窗占满屏.modal改为固定定位左右各留 20px480px 以下缩至 10px接近全屏体验排版重排水平定义的dl变为纵向排列页面两侧增加 20px 内边距避免文字贴边。 桌面 / 平板 / 手机三端可见性控制类不需要写任何媒体查询只需在 HTML 元素上加一个类就能精确控制某块内容只在特定端显示定义见 less/responsive-utilities.less类名效果visible-phone仅手机≤767px可见visible-tablet仅平板768~979px可见visible-desktop仅桌面≥980px可见hidden-phone/hidden-tablet/hidden-desktop对应的反向隐藏类典型用法桌面端展示完整磁贴网格手机端换成简化列表——两个容器分别加上visible-desktop和visible-phone即可。 响应式导航栏979px 以下自动折叠less/responsive-navbar.less 实现了 Metro 应用的招牌交互≥980px导航项平铺显示在顶栏≤979px导航项全部隐藏顶栏只保留品牌名和一个btn-navbar汉堡按钮点击展开纵向菜单下拉菜单也降级为纯列表样式。配合navbarCollapseWidth变量可以把折叠触发点调整到更适合自己产品导航项数量的宽度。⚙️ 网格系统如何随断点伸缩三档断点背后是同一套 12 列网格less/grid.less只是列宽和槽宽gutter随屏幕缩放1200px 以上更宽的列宽与槽宽大屏幕上空间利用更充分768~979px列宽收缩12 列依旧可用布局比例保持一致940px 默认标准桌面基准尺寸。也就是说你按 940px 基准写的span6两栏布局在平板上会自动变成更窄的两栏在手机上自动变成上下两行不用改 HTML。✅ 快速上手让 BootMetro 项目获得响应式能力引入响应式样式表在页面中加载编译好的 src/assets/css/bootmetro-responsive.css它是所有断点规则含 1200px / 979px / 767px / 480px 四档的合集HTML 头部加上 viewport 标签让移动设备按实际物理宽度渲染页面按断点检查交互浏览器开发者工具切换到 1200px 以上、980~1199px、768~979px、767px 以下四档宽度验证导航折叠、单列网格和全宽表单是否符合预期需要更精细控制时修改 less/variables.less 中的navbarCollapseWidth或按需拆分引入 less/responsive.less 中的单个断点文件重新编译。 小结BootMetro 的响应式设计把适配任意屏幕变成了三件小事选对断点、加对类名、加载一份响应式 CSS。3 档核心媒体查询覆盖桌面、平板、手机三大场景导航栏在 979px 处优雅折叠网格在 767px 处平滑退化为单列——从桌面大屏到手机小屏一套 Metro 页面即可通吃。【免费下载链接】bootmetroSimple and complete web UI framework to create web apps with Windows 8 Metro user interface, based on Bootstrap 2.项目地址: https://gitcode.com/gh_mirrors/bo/bootmetro创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
