Skeleton 不适合现代移动端项目，因其是2012年纯CSS框架，无JS、无响应式断点控制、不支持Flex/Grid，依赖固定像素宽度和手动添加mobile类名，无法适配多端视口变化，维护成本高。
为什么 Skeleton 不适合现代移动端项目
直接说结论：Skeleton 是个 2012 年发布的纯 CSS 网格框架，没 JS、没响应式断点控制、不支持 Flex/Grid 布局逻辑，现在拿它搭移动端页面，等于用自行车驮货跑高速——能动，但吃力、易出错、维护成本高。
它只靠 .container + .row + .columns 类名硬撑响应行为，所有“响应”都依赖预设的固定像素宽度（比如 .one-third 固定为 300px），在 iPhone SE 和 iPad Pro 上表现完全一样，根本没法适配视口变化。
常见错误现象：width: 100% 的容器在小屏上内容溢出、.mobile-one-half 在 iOS Safari 下失效、字体和间距在不同设备上比例失调。
Skeleton 的 mobile 类名到底怎么触发
它没有媒体查询监听机制，所谓“移动端适配”，只是靠一个静态类名 mobile 手动加在元素上，比如 <div class="mobile-one-half">。这个类名是否生效，完全取决于你有没有在 HTML 里写它，跟设备无关。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>不写 <code>mobile- 前缀，就永远是桌面样式（比如 .one-half 固定占 50% 宽度，哪怕在手机上）
mobile 父容器，很多样式不会生效（Skeleton 要求 .mobile-one-half 必须嵌套在带 mobile 类的父级里）@media only screen and (max-width: 767px)，但这个查询只用于隐藏/显示部分辅助类，不是驱动整个布局系统也就是说：你得自己用 JS 检测屏幕宽度，再手动切换 class —— 这已经脱离了 Skeleton 的设计初衷，反而让代码更难维护。
如果非要用 Skeleton，必须改这三处
原版 Skeleton 的 CSS 文件（skeleton.css）几乎无法直接用于真机调试。想勉强跑通，至少得动以下地方：
- 把所有
px宽度（如.container { width: 960px; }）替换成max-width: 100%; padding: 0 1rem;，否则小屏直接横向滚动 - 删掉或注释掉所有
font-size: 14px类型声明，统一用rem或vw，不然 iPhone 上文字小到看不清 - 把
.row:before, .row:after的content: ""清除浮动逻辑换成display: flex; flex-wrap: wrap;，否则子元素在 Safari 中换行异常
示例修改前：.container { width: 960px; margin: 0 auto; }
修改后：.container { max-width: 100%; margin: 0 auto; padding: 0 1rem; }
真正轻量又靠谱的替代方案
如果你要的是「快速、响应、移动端友好、无构建步骤」，别卡在 Skeleton 上。这几个更贴实际：
- 用原生
display: grid+minmax(300px, 1fr)，两行代码搞定自适应卡片流，兼容 iOS 10.3+ - 引入
picnicss.com的 CSS（仅 4KB），它用@supports自动降级，.col-6在小屏自动变 100% - 连 CSS 文件都不想引？直接写内联
style="display: flex; flex-direction: column;"配合media查询，比折腾 Skeleton 的 class 名快得多
复杂点在于：Skeleton 的 class 设计假设你用桌面优先流程写 HTML，而真实移动端开发需要的是内容优先、视口驱动、渐进增强——这两者从根上就不匹配。
