响应式设计实践：从移动端到桌面端

#css#响应式#tailwind
响应式设计实践：从移动端到桌面端

移动优先

Tailwind CSS 默认是移动优先的：不带前缀的类作用于所有屏幕， md: 前缀的类只在 768px 以上生效。本博客也遵循这一约定。

<!-- 移动端单列，PC 端双列 -->
<div class="grid grid-cols-1 md:grid-cols-2">

断点选择

本博客只用一个断点：md（768px）。理由是：

  • 768px 恰好是 iPad 竖屏宽度，是平板和手机的分界线
  • 断点越少，样式组合越简单，维护成本越低
  • 特殊场景用 min-width 媒体查询单独处理

导航栏的响应式

PC 端显示完整导航 + 搜索框 + 主题切换；移动端折叠为汉堡菜单 + 搜索图标：

<!-- PC 布局 -->
<div class="hidden md:flex items-center justify-between">
  ...
</div>

<!-- 移动布局 -->
<div class="flex md:hidden items-center justify-between">
  ...
</div>

两套布局用 hidden md:flex 和 flex md:hidden 互斥切换，简单直接。

图片适配

文章封面图统一用 w-full + object-cover，不设固定高度， 让图片自然撑开容器，避免在不同屏幕上裁切不一致。

触摸交互

移动端的交互区域不小于 44×44px（Apple HIG 建议），导航按钮统一用 h-9 w-9（36px） 加上 padding 后实际触摸区域满足要求。滚动相关动画在移动端做轻量化处理， 只保留上浮位移，不做透明度过渡，避免内容「闪一下」的中间态。