Gridism 移动端优化终极秘笈：only-on-mobiles、hide-on-mobiles 等 4 个响应式类名的正确用法-二趣网

Gridism 移动端优化终极秘笈：only-on-mobiles、hide-on-mobiles 等 4 个响应式类名的正确用法

【免费下载链接】gridismA simple responsive CSS grid.项目地址: https://gitcode.com/gh_mirrors/gr/gridism

Gridism 是一款以"简单"为灵魂的响应式 CSS 网格框架，仅凭一份gridism.css就能完成 PC 端与移动端的自适应布局。许多新手在做移动端优化时，只知道让栅格列自动堆叠，却忽略了框架内置的 only-on-mobiles、hide-on-mobiles 等 4 个响应式类名。这篇文章将用最通俗的语言，带你掌握它们的正确用法与组合技巧，轻松实现"桌面一套、手机一套"的差异化页面。

Gridism 是什么？一个文件搞定响应式布局

Gridism 是一个轻量级、零依赖的 CSS 网格框架。它的核心思想是"用分数思考布局"：不用记 12 栏或 16 栏，直接把区块想成几分之几即可。

列宽类名直观好记：whole、half、one-third、two-thirds、one-quarter、one-fifth等，并提供w-1-1、w-1-2、w-2-3简写形式；
内置黄金分割类golden-small与golden-large，排版更具美感；
自动清除浮动、自动处理栅格间距，外层与内层 gutter 自动对齐；
可选容器宽度：wrap最大 978px，wider最大 1180px。

整个框架只有一个样式文件gridism.css（核心源码），配套一份README.md说明文档，学习成本几乎为零。

移动端优化的核心机制：568px 断点与自动堆叠

Gridism 的移动端优化不需要任何额外设置——它默认就是响应式的。框架在gridism.css中定义了一个关键媒体查询：当屏幕宽度 ≤ 568px 时，所有非整列的unit会自动变成 100% 宽度并垂直堆叠。

这意味着：同一份 HTML，在手机上浏览时列会自动"排队"，你不需要写任何 JavaScript 或媒体查询代码。568px 这个断点正好覆盖了绝大多数手机竖屏宽度，是移动端优化体验的分水岭。

另外，当屏幕宽度 ≥ 1180px 时，加上wider类的容器会从 978px 扩展到 1180px，充分利用大屏空间。

4 个响应式类名逐一拆解：正确用法与典型场景

only-on-mobiles：只在手机上显示的内容 📱

only-on-mobiles默认是display: none（桌面端隐藏），只有进入 ≤568px 的移动端视口时才显示。

典型场景：移动端专属的"下载 App"横幅、扫码入口、悬浮操作按钮、移动端导航菜单。
正确用法：给需要在手机上出现的元素直接加上这个类名即可。
注意事项：移动端该类的显示方式被强制为display: block，若目标元素原本是行内元素（如 span），需要自行调整。

hide-on-mobiles：在手机上悄悄隐藏的桌面元素 🙈

hide-on-mobiles与前者正好相反：桌面端正常显示，在 ≤568px 的移动端视口下隐藏。

典型场景：桌面导航栏、数据密集的表格、大型轮播图、侧边栏等"手机上放不下"的内容。
正确用法：给需要隐藏的元素加上类名，移动端自动消失，无需 JS 判断屏幕宽度。

center-on-mobiles：手机上居中，桌面上不变 🎯

center-on-mobiles只在移动端视口下生效，会把元素的text-align强制为居中；桌面端不受影响。

典型场景：移动端页面里的标题、按钮、底部 CTA、促销文案，居中后视觉效果更聚焦。
正确用法：想让哪个元素"手机端居中、桌面端靠左"，就给它加上这个类名。

no-stacking-on-mobiles：拒绝堆叠，保持并排 🧱

这是 4 个类名中"技术含量"最高的一个。默认情况下，移动端所有列都会堆叠成一行一列；但有些内容（比如两个并排的小按钮、图表加简短说明）在手机上依然希望保持并排。

正确用法：把它加在.grid容器上（如class="grid no-stacking-on-mobiles"），其直接子级unit在移动端会保留原有的百分比宽度，不再强制堆叠。
注意事项：它只作用于容器的直接子级 unit，嵌套层级过深时需单独处理。

实战组合用法：一条 HTML 实现移动端差异化布局

把 4 个类名组合起来，就能用一份 HTML 同时服务桌面端和移动端：

<header class="grid"> <div class="unit half"> <a class="hide-on-mobiles" href="#">桌面导航：首页 · 关于 · 联系</a> <button class="only-on-mobiles">☰ 移动菜单</button> </div> <div class="unit half center-on-mobiles"> <h1>Gridism 实战</h1> </div> </header> <section class="grid no-stacking-on-mobiles"> <div class="unit half">左：数据图表</div> <div class="unit half">右：一句话说明</div> </section>

效果一目了然：桌面端显示完整导航，手机端换成菜单按钮；图表区块在手机上依然并排不堆叠；标题在手机上自动居中。整个响应式行为零 JS、零额外媒体查询。

新手避坑指南：这 3 个错误千万别犯 ⚠️

忘记 viewport 标签：没有<meta name="viewport" content="width=device-width,initial-scale=1">，手机浏览器会按桌面宽度等比缩放，所有移动端优化类名全部失效。
在桌面端测试 only-on-mobiles：这些类名只在 ≤568px 生效，调试时请打开浏览器开发者工具切换到移动端模拟。
误用 no-stacking-on-mobiles 层级：它只对直接子级生效；嵌套网格如果也想保持并排，需要在每一层容器上分别添加。

快速上手：3 步完成移动端优化配置 🚀

第一步：获取文件。最简单的方式是使用 Bower 安装：bower install gridism；也可以直接 clone 仓库获取源码：git clone https://gitcode.com/gh_mirrors/gr/gridism，然后把gridism.css复制到项目目录。

第二步：引入样式。在 HTML 的<head>中链接gridism.css即可（路径按你的目录结构调整）。

第三步：添加 viewport。在<head>中加入<meta name="viewport" content="width=device-width,initial-scale=1">，这是移动端优化生效的前提，千万别漏。

总结

Gridism 用一份极简的 CSS 文件，把移动端优化的复杂度降到了最低。只要吃透 only-on-mobiles、hide-on-mobiles、center-on-mobiles、no-stacking-on-mobiles 这 4 个响应式类名，再配合 568px 自动堆叠机制，你就能在不写一行 JS 的情况下，轻松做出"桌面完整、手机精简"的差异化页面。快打开gridism.css动手试试吧！

【免费下载链接】gridismA simple responsive CSS grid.项目地址: https://gitcode.com/gh_mirrors/gr/gridism

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析