Glittering's blog

Appearance

「把 Tailwind 的设计系统，真正落地到 H5 适配」。

一、H5 适配的三种主流方案 ​

方案核心单位是否需要 JS是否推荐
rem + JSrem✅⚠️ 老方案
vw / vhvw❌✅ 主流
vw + rem 混合vw + rem❌⭐ 企业级

📌 结论（直接给你）：

👉 Tailwind + vw + rem（混合）是当前最稳的 H5 方案

二、为什么不用纯 rem 了？ ​

rem 的问题 ​

  • 依赖 JS 注入
  • 首屏抖动
  • iframe / webview 有坑
  • 和 Tailwind 默认 rem 冲突

📌 但 rem 仍然有价值：

  • 字号
  • 间距
  • 圆角

三、推荐方案架构（重点） ​

👉 设计稿假设 ​

  • 设计宽度：375px

👉 单位策略 ​

用途单位
布局宽高vw
字体rem
间距 / 圆角rem
最大宽度px

四、Tailwind 的核心配置（关键） ​

1️⃣ 设置 root font-size（不需要 JS） ​

css
/* main.css */
html {
  font-size: 16px;
}

2️⃣ 修改 spacing / fontSize 使用 rem + vw ​

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      spacing: {
        // 设计稿 375 → 1vw = 3.75px
        4: '1.067vw',   // 4px
        8: '2.133vw',   // 8px
        12: '3.2vw',
        16: '4.267vw'
      },
      fontSize: {
        sm: '0.875rem',
        base: '1rem',
        lg: '1.125rem'
      }
    }
  }
}

📌 注意

  • 不要覆盖默认 spacing
  • 只 extend 你需要的

五、更优雅方案：使用 clamp（强烈推荐） ​

核心思想 ​

字体 & 间距 小屏用 vw，大屏锁死

1️⃣ clamp 字号 ​

js
fontSize: {
  base: 'clamp(14px, 3.7vw, 16px)',
  lg: 'clamp(16px, 4vw, 18px)'
}

2️⃣ clamp 间距 ​

js
spacing: {
  4: 'clamp(4px, 1.067vw, 8px)',
  8: 'clamp(8px, 2.133vw, 16px)'
}

📌 这是现在大厂 H5 的默认解法

六、vw 布局类（插件方式，最干净） ​

写一个 vw 工具类插件 ​

js
// plugins/vw.js
import plugin from 'tailwindcss/plugin'

export default plugin(({ addUtilities }) => {
  addUtilities({
    '.vw-full': { width: '100vw' },
    '.vh-full': { height: '100vh' },
    '.vw-safe': {
      paddingLeft: 'env(safe-area-inset-left)',
      paddingRight: 'env(safe-area-inset-right)'
    }
  })
})

七、Vue / H5 页面实战示例 ​

vue
<template>
  <div class="vw-full min-h-screen bg-gray-50">
    <header class="p-4 text-lg font-bold">
      标题
    </header>

    <section class="px-4 space-y-4">
      <div class="p-4 bg-white rounded-xl shadow-card">
        内容卡片
      </div>
    </section>
  </div>
</template>

📌 特点：

  • 布局自动随屏幕变化
  • 字体不炸
  • iPad / 横屏可控

八、最大宽度限制（非常重要） ​

html
<div class="max-w-[480px] mx-auto"></div>

📌 防止 iPad / 大屏 H5 失控

九、常见坑 & 底层解释 ​

1️⃣ vw 在横屏变大 ​

✅ 解决：

css
@media (orientation: landscape) {
  html {
    font-size: 14px;
  }
}

2️⃣ Tailwind 默认 rem 和 vw 冲突？ ​

不会：

  • Tailwind 只是生成 CSS
  • 单位完全由你定义

3️⃣ 为什么不用 PostCSS px → vw？ ​

❌ 会影响第三方组件 ❌ debug 困难

📌 Tailwind 本身就是设计系统，不需要二次转换

十、完整推荐配置模板（你可直接用） ​

js
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts}'],
  theme: {
    extend: {
      fontSize: {
        base: 'clamp(14px, 3.7vw, 16px)',
        lg: 'clamp(16px, 4vw, 18px)'
      },
      spacing: {
        4: 'clamp(4px, 1.067vw, 8px)',
        8: 'clamp(8px, 2.133vw, 16px)',
        12: 'clamp(12px, 3.2vw, 24px)'
      }
    }
  }
}

Copyright © 2026