跳到主要内容

响应式布局实现

屏幕宽度布局模式说明
< 768px移动端竖屏全屏视频上下滑动，顶部搜索，底部导航
768px - 1280px平板双列左侧视频列表，右侧播放器
> 1280pxPC 宽屏三栏左侧导航 + 中间视频 Feed + 右侧推荐面板

响应式布局标准​

  • 手机端：100% 沉浸式竖屏（< 768px） → snap scroll
  • 平板端：双列瀑布流（768px - 1280px） → grid-cols-2
  • 桌面端：左中右三栏（≥ 1280px） → 256 + 672 + 384 黄金比例

关键实现技巧汇总（生产级）​

需求推荐实现方式为什么好
手机端强制竖屏全屏视频h-screen + snap-y snap-mandatory + overflow-y-scroll + scrollbar-hide原生 CSS 滚动捕获，60fps 丝滑，零 JS 卡顿
隐藏手机端滚动条但保留滚动scrollbar-hide（Tailwind 插件）或 ::-webkit-scrollbar { display:none }视觉干净，功能正常
视频宽高自适应aspect-[9/16] 或 aspect-video + object-cover保持 9:16 比例，裁剪多余部分
PC 端主 Feed 宽度固定max-w-2xl mx-auto（672px）抖音官方推荐阅读宽度，超过会感觉太宽
侧边栏固定宽度w-64（256px） / w-96（384px） + flex-shrink-0防止被挤压变形
响应式间距p-4 md:p-6 lg:p-8屏幕越大留白越多
文字大小自适应text-sm md:text-base lg:text-lg可读性最佳
搜索栏宽度自适应w-full max-w-md mx-auto手机占满，桌面居中限制宽度

Web 版实际采用的三套布局响应式方案​

bash
<template>
  <!-- 方案1：手机端（< 768px）—— 100% 沉浸式竖屏滑动（抖音原生体验） -->
  <div class="md:hidden">                     <!-- 只在 < md 时显示 -->
    <div class="fixed inset-0 snap-y snap-mandatory overflow-y-scroll">
      <div v-for="video in videos" class="snap-center h-screen">
        <VideoPlayer :video="video" />
      </div>
    </div>
    <MobileHeader />
    <MobileBottomNav />
  </div>

  <!-- 方案2：平板（768px ~ 1280px）—— 双列瀑布流 -->
  <div class="hidden md:flex lg:hidden">      <!-- 只在 md ~ lg 之间显示 -->
    <PcSidebar />
    <div class="flex-1 grid grid-cols-2 gap-4 p-4 overflow-y-auto">
      <VideoCard v-for="video in videos" :video="video" />
    </div>
  </div>

  <!-- 方案3：桌面端（≥ 1280px）—— 经典三栏（左中右） -->
  <div class="hidden lg:flex h-screen">
    <PcSidebar class="w-64 flex-shrink-0" />                 <!-- 固定 256px -->
    <main class="flex-1 max-w-2xl overflow-y-auto">          <!-- 主 Feed，最大 672px（抖音推荐宽度） -->
      <VideoCard v-for="video in videos" :video="video" class="mb-8" />
    </main>
    <PcRightSidebar class="w-96 flex-shrink-0" />            <!-- 右侧推荐面板 -->
  </div>
</template>

tailwindcss布局技巧​

断点名称最小宽度典型设备
(默认)0手机竖屏（< 768px）
sm640px大手机/小手机横屏
md768px平板竖屏
lg1024px平板横屏/小笔记本
xl1280px桌面显示器
2xl1536px大桌面

核心 CSS 黑魔法​

这几个 Tailwind 类在 已经彻底成为短视频/小红书/抖音 Web 端的标配

snap​

  • snap-y 、snap-mandatory 用于 实现“上下滑动一个视频占满一屏”的灵魂
类名对应原生 CSS作用说明
snap-yscroll-snap-type: y mandatory;开启垂直方向的滚动吸附（只能上下滑）
snap-mandatory（上面那行已经包含）强制吸附：必须停在某个子元素上，不能停在“半截”
snap-centerscroll-snap-align: center;当前子元素在容器中居中吸附（我们每个视频正好占满一屏）
h-screenheight: 100vh每个视频容器高度正好是屏幕高度
overflow-y-scrolloverflow-y: scroll允许垂直滚动
scrollbar-hide::-webkit-scrollbar { display:none }隐藏滚动条但保留滚动功能（手机端极致沉浸感）

aspect-video​

这是 Tailwind 的 Aspect Ratio 插件（@tailwindcss/aspect-ratio）提供的语法，2024 年已成标配

  • 保证视频比例
类名对应比例用途场景
aspect-[9/16]9:16短视频标准竖屏（抖音、快手、TikTok）
aspect-video16:9横视频（YouTube、Netflix）
aspect-square1:1正方形（Instagram 旧版）
aspect-[4/3]4:3老电视比例

抖音手机端 Web 的核心​

css
<div class="fixed inset-0 snap-y snap-mandatory overflow-y-scroll scrollbar-hide">
  <!-- 每个视频必须占满一屏 -->
  <div v-for="video in videos" class="snap-center h-screen relative">
    <VideoPlayer :video="video" />
  </div>
</div>

效果就是：

  • 你一滑手 → 立刻“咔”地吸附到下一个完整视频
  • 不会出现“上半个视频 + 下半个视频”的尴尬中间态
  • 完全原生 CSS，丝滑度 = 原生 App（60fps 无压力）