使用 tailwind 实现一个响应式网站的示例

使用 tailwind 实现一个响应式的示例

下面是一个使用 Tailwind CSS 实现的响应式网站示例。这个示例包含一个简单的响应式导航栏、主内容区和页脚，适配移动设备（手机）、平板和桌面。

✅ 本示例使用了 Tailwind CSS 的 CDN 方式引入，适合快速预览。生产环境建议使用构建工具（如 Vite、Webpack）。

✅ 响应式网站示例代码（HTML + Tailwind CSS）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>响应式网站示例</title>
  <!-- 引入 Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 font-sans leading-relaxed">

  <!-- 导航栏 -->
  <nav class="bg-blue-600 text-white shadow-md">
    <div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between">
      <!-- Logo -->
      <div class="text-xl font-bold">MySite</div>

      <!-- 移动端菜单按钮 -->
      <button class="md:hidden text-white focus:outline-none" id="menu-toggle">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>

      <!-- 导航链接 -->
      <div class="hidden md:flex space-x-6" id="menu">
        <a href="#" class="hover:underline">首页</a>
        <a href="#" class="hover:underline">关于</a>
        <a href="#" class="hover:underline">服务</a>
        <a href="#" class="hover:underline">联系</a>
      </div>
    </div>

    <!-- 移动端下拉菜单 -->
    <div class="md:hidden hidden bg-blue-700 text-white px-4 py-2 space-y-2" id="mobile-menu">
      <a href="#" class="block hover:underline">首页</a>
      <a href="#" class="block hover:underline">关于</a>
      <a href="#" class="block hover:underline">服务</a>
      <a href="#" class="block hover:underline">联系</a>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="container mx-auto px-4 py-8">
    <!-- Hero Section -->
    <section class="text-center py-16 bg-white rounded-lg shadow-md mb-8">
      <h1 class="text-3xl md:text-5xl font-bold text-gray-800 mb-4">欢迎来到我的网站</h1>
      <p class="text-lg text-gray-600 mb-8">一个使用 Tailwind CSS 构建的响应式页面示例。</p>
      <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-lg transition">
        开始探索
      </button>
    </section>

    <!-- 卡片网格 -->
    <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
        <h3 class="text-xl font-semibold text-gray-800 mb-2">响应式设计</h3>
        <p class="text-gray-600">在手机、平板和桌面设备上都能完美显示。</p>
      </div>
      <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Tailwind CSS</h3>
        <p class="text-gray-600">实用优先的 CSS 框架，快速构建现代界面。</p>
      </div>
      <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
        <h3 class="text-xl font-semibold text-gray-800 mb-2">易于维护</h3>
        <p class="text-gray-600">类名清晰，结构简洁，便于团队协作与维护。</p>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-gray-800 text-white text-center py-6 mt-12">
    <div class="container mx-auto px-4">
      <p>&copy; 2025 MySite. 版权所有。</p>
    </div>
  </footer>

  <!-- 移动端菜单切换脚本 -->
  <script>
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');

    menuToggle.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });
  </script>
</body>
</html>

📱 响应式特性说明

| 断点 | Tailwind 类 | 设备 |
|------|-------------|------|
| sm | ≥640px | 小屏（如小平板） |
| md | ≥768px | 平板 |
| lg | ≥1024px | 桌面 |
| xl | ≥1280px | 大桌面 |

使用 md:hidden 和 md:flex 实现桌面端显示菜单，移动端隐藏。
使用 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 实现卡片响应式布局。
导航栏在移动端显示汉堡菜单，点击展开。

✅ 效果预览

手机：单列布局，汉堡菜单
平板：两列卡片，导航栏横排
桌面：三列卡片，完整导航

🔧 进阶建议

生产环境：使用 Tailwind CLI 或集成到 Vite/React/Vue 项目中，避免使用 CDN。
自定义主题：通过 tailwind.config.js 自定义颜色、字体等。
动画与交互：结合 Alpine.js 或原生 JS 提升交互体验。

如果你希望使用 React + Tailwind 或 Next.js 的响应式示例，也可以告诉我，我可以提供更高级的版本。