TinyPro移动端适配方案的技术拆解

本文由TinyPro贡献者王晨光同学原创。

一、背景：让 TinyPro 真正“走到掌心里”

TinyPro 是一套基于TinyVue打造的前后端分离后台管理系统，支持菜单配置、国际化、多页签、权限管理等丰富特性。
TinyPro 在桌面端具备良好的体验和模块化架构，但随着移动办公、平板展示等场景增多，移动端体验的短板逐渐显现：

• 页面缩放不均衡，布局出现溢出或错位；
• 模态框在小屏上遮挡内容；
• 图表和表格在横屏与竖屏间切换时无法自适应；
• 操作区过于密集，不符合触控习惯。

为此启动了TinyPro 移动端适配项目，目标是在不破坏现有结构的前提下，实现“一次开发，跨端流畅”的体验。

二、技术选型与总体架构

本次移动端适配要求在复杂的中后台系统中实现「一次开发，多端自适应」，既要保证样式灵活，又要维持可维护性和构建性能。

在技术选型阶段，综合评估了三种常见方案：

最终选择了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>前缀实现“桌面端优先”的响应式策略。

constbreakpoints={sm:'641px',// 手机（小屏）md:'769px',// 平板竖屏lg:'1025px',// 平板横屏 / 小型笔电xl:'1367px',// 常规笔电'2xl':'1441px',// 高清笔电'3xl':'1921px',// 桌面大屏}

并通过自定义variants扩展max-<bp>前缀:

variants:[(matcher)=>{constmatch=matcher.match(/^max-([a-z0-9]+):/)if(match){constbp=match[1]constvalue=breakpoints[bp]if(!value)returnreturn{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事件处理增加节流机制，避免窗口缩放等场景下的频繁无效渲染。

四、常用代码片段

1. 基于栅格系统 + 响应式断点工具类，通过为 tiny-row 和 tiny-col 添加不同屏幕宽度下的样式规则，实现自适应布局：

<tiny-layout> <tiny-row class="flex justify-center max-md:flex-wrap"> <tiny-col class="w-1/4 max-md:w-1/2 max-sm:w-full max-md:mb-4">···</tiny-col> ··· <tiny-col class="w-1/4 max-md:w-1/2 max-sm:w-full max-md:mb-4">···</tiny-col> </tiny-row> </tiny-layout>

<div class="theme-line flex max-sm:grid max-sm:grid-cols-4 max-sm:gap-2"> <div··· </div> </div>

2. 基于 响应式工具类 + 自定义响应式 Hook,解决(1)对话框宽度自适应;(2)表格尺寸和密度自适应;(3)逻辑层响应式控制

<template> <section class="p-4 sm:p-6 lg:p-8 max-sm:text-center"> <tiny-dialog :width="modalSize">...</tiny-dialog> </section> </template> <script setup lang="ts"> import { useResponsiveSize } from '@/hooks/responsive' const { modalSize } = useResponsiveSize() // 小屏 100%，大屏 768px </script>

<template> <div class="container"> <tiny-grid ref="grid" :fetch-data="fetchDataOption" :pager="pagerConfig" :size="gridSize" :auto-resize="true" align="center"> ··· </tiny-grid> </div> </template> <script setup lang="ts"> import { useResponsiveSize } from '@/hooks/responsive' const { gridSize } = useResponsiveSize() // 小屏为mini grid，大屏为medium grid </script>

3. 通过useResponsive获取屏幕断点状态sm/md/lg，如：在模板中结合v-if="!lg"控制分隔线的渲染，从而实现了小屏下纵向菜单才显示分隔线的效果

<template> <ul class="right-side" :class="{ open: menuOpen }"> <!-- 小屏下才显示分隔线 --> <li v-if="!lg"> <div class="divider"></div> </li> ··· </ul> </template> <script lang="ts" setup> import { useResponsive } from '@/hooks/responsive' const { lg } = useResponsive() </script>

五、结语

通过本次移动端适配， TinyPro 实现了“从桌面到掌心”的统一体验：
开发者可以继续沿用熟悉的组件体系与布局方式，同时享受 UnoCSS 带来的原子化灵活性与性能优势。在不改变核心架构的前提下，TinyPro 变得更轻盈、更顺滑，也更符合移动时代的使用场景。

关于OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：https://opentiny.design
OpenTiny 代码仓库：https://github.com/opentiny
TinyPro源码：https://github.com/opentiny/tiny-pro

欢迎进入代码仓库 Star🌟TinyPro、TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor
如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~