本文由TinyPro贡献者王晨光同学原创。
一、背景：让 TinyPro 真正”走到掌心里”
TinyPro 是一套基于 TinyVue 打造的前后端分离后台管理系统，支持菜单配置、国际化、多页签、权限管理等丰富特性。 TinyPro 在桌面端具备良好的体验和模块化架构，但随着移动办公、平板展示等场景增多，移动端体验的短板逐渐显现：
- 页面缩放不均衡，布局出现溢出或错位；
- 模态框在小屏上遮挡内容；
- 图表和表格在横屏与竖屏间切换时无法自适应；
- 操作区过于密集，不符合触控习惯。
为此启动了 TinyPro 移动端适配项目 ，目标是在不破坏现有结构的前提下，实现”一次开发，跨端流畅“的体验。
二、技术选型与总体架构
本次移动端适配要求在复杂的中后台系统中实现「一次开发，多端自适应」，既要保证样式灵活，又要维持可维护性和构建性能。
在技术选型阶段，综合评估了三种常见方案：
| 方案 | 优点 | 缺点 | | —————- | ——————– | —————- | | 纯 CSS 媒体查询 | 简单直接、依赖少 | 样式分散、逻辑重复、维护困难 | | TailwindCSS 响应式类 | 社区成熟、类名直观、生态完善 | 样式表体积大、断点固定、不够灵活 | | UnoCSS 原子化方案 | 按需生成、性能极轻、断点与变体完全可定制 | 需要自行配置规范与规则体系 |
最终选择了 UnoCSS + Less 的混合架构：
- UnoCSS：负责通用布局、间距、排版等高频样式，原子化写法提升开发效率；
- Less 媒体查询：用于模态框、导航栏等复杂场景的精细控制；
- 统一断点配置：集中管理屏幕尺寸分级，保持视觉一致性；
- 自定义变体（
max-<bp>）：支持”桌面端优先”策略，通过 max-width 实现移动端自适应，样式逻辑更直观。
UnoCSS：轻量、灵活、即时生成
UnoCSS 是一个 按需生成的原子化 CSS 引擎 ，最大的特点是 零冗余与高度可定制。 不同于 TailwindCSS 的预编译方式，UnoCSS 会在构建阶段根据实际使用的类名即时生成样式规则，从而显著提升构建性能与灵活性.
在配置中通过 presetMini() 与 presetAttributify() 组合使用，使开发者既可以写：
<div class="p-4 text-center bg-gray-100 max-md:p-2"></div>
也可以使用属性化语法：
<div p="4" text="center" bg="gray-100" max-md:p="2"></div>
presetMini 提供轻量原子类体系，presetAttributify 则允许以声明式方式书写样式，更直观、组件化友好。
断点配置与响应式策略
TinyPro 的适配核心之一，是在 uno.config.ts 中建立统一的断点体系，并通过自定义 max-<bp> 前缀实现”桌面端优先”的响应式策略。
const breakpoints = {
sm: '641px', // 手机（小屏）
md: '769px', // 平板竖屏
lg: '1025px', // 平板横屏 / 小型笔电
xl: '1367px', // 常规笔电
'2xl': '1441px', // 高清笔电
'3xl': '1921px', // 桌面大屏
}
并通过自定义 variants 扩展 max-<bp> 前缀:
variants: [
(matcher) => {
const match = matcher.match(/^max-([a-z0-9]+):/)
if (match) {
const bp = match[1]
const value = breakpoints[bp]
if (!value) return
return {
matcher: matcher.replace(`max-${bp}:`, ''),
parent: `@media (max-width: ${value})`,
}
}
},
]
让开发者能自然地书写：
<div class="w-1/2 max-md:w-full"></div>
含义：
默认宽度为 50%，在宽度小于 769px 的设备上改为 100%。
TinyPro 采用「桌面端优先（max-width）」的布局策略：默认以桌面端布局为基础，在移动设备上再进行针对性优化。相比常见的「移动端优先（min-width）」方式，这种做法更符合中后台系统的特性，同时让 UnoCSS 的断点逻辑更直观，并确保主屏体验的稳定性。
三、样式与编码策略
-
优先级
- 简单场景：使用 UnoCSS 原子类。
- 复杂样式：使用 Less 媒体查询。
-
布局与滚动
- 首页及核心业务模块完成适配，小屏模式下侧边栏默认收起、导航栏折叠，确保主要内容可见。
- 页面主要容器避免横向滚动，必要时在小屏下开启局部横向滚动。
- 表格与大区块在不同断点下自动调整宽度、栅格与间距，小屏下支持横向滚动；分页与密度支持响应式控制。
-
图表自适应
- 图表组件接入
resize监听，在侧边栏展开/收起、窗口缩放、语言切换等场景下保持自适应。 - 小屏下使用
vw宽度与较小字号，保证图表展示效果与可读性。
- 图表组件接入
-
表单与模态框
- 接入
useResponsiveSize()，控制弹窗在小屏下铺满显示，大屏保持固定宽度。 - 表单项在不同断点下动态调整排布与间距，优化触控体验。
- 接入
-
导航与交互
- 小屏下隐藏导航栏非关键元素，操作聚合到”折叠菜单”。
- 移动端默认收起侧边菜单栏，提升主要内容展示区域。
-
性能优化
- 在
responsive.ts中对resize事件处理增加节流机制，避免窗口缩放等场景下的频繁无效渲染。
- 在
