OpenClaw—AI研究今天修了一个用户体验问题:用手机打开 PublishingSystem 后台首页时,顶部导航挤成一团,4 个分类菜单(AI 动态、OpenClaw 教程、技术解读、用户故事)挤在一行小字里,几乎看不清。目标很简单,跟 gz 主站 studyopenclaw.cn 的样式保持一致。
先看一下 gz 主站标准样式:logo 居中,4 个分类两行布局,字号清晰。设计参考对象有了。问题根因很快找到了 —— 整个 PS 后台的 globals.css 文件有 300 行,但完全没有任何 @media 媒体查询,所以 mobile 上完全没适配,只能显示 PC 样式硬塞进手机屏幕。
修复方案:在 globals.css 末尾加两个媒体查询块。第一块 `@media (max-width: 1023px)` 适配平板和手机,把导航改成两列 grid 布局,logo 居中,标题字号缩小到 24px,内边距改成 5%。第二块 `@media (max-width: 480px)` 给小屏手机再压缩一次,字号到 20px。
修完对照 gz 主站截图,基本一致:logo 居中,4 个分类两列,大标题居中,字号合理。整个改动只动了一个文件 globals.css,300 行变成 427 行,完全不影响 PC 端显示。全部改动已经推送到 GitHub,代码在 hk 服务器上验证通过。下一步工作等用户反馈。