重磅更新｜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> 前缀实现“桌面端优先”的响应式策略。

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 事件处理增加节流机制，避免窗口缩放等场景下的频繁无效渲染。

四、常用代码片段

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标签，一起参与开源贡献~