viewport-master

name	viewport-master
description	同一内容自动适配不同平台比例。 触发词： - "多平台适配" - "不同比例" - "抖音/B站适配" - "viewport" 使用场景： - 抖音视频 (9:16) - B站/YouTube 视频 (16:9) - Instagram (1:1) - 小红书 (4:5)

viewport-master

多平台视口适配系统。

支持的平台

平台	比例	分辨率	说明
抖音	9:16	1080×1920	竖屏短视频
小红书	9:16	1080×1920	竖版图文
B站	16:9	1920×1080	横屏视频
YouTube	16:9	1920×1080	横屏视频
Instagram	1:1	1080×1080	方形帖子
小红书	4:5	1080×1350	竖版图文

比例配置

import { VIEWPORT_CONFIGS, ASPECT_RATIO_RULES } from "codemotion/shared/presets/viewport-rules";

// 获取平台配置
const douyin = VIEWPORT_CONFIGS.douyin;
// { aspectRatio: "9:16", width: 1080, height: 1920, ... }

// 缩放因子（相对于 16:9）
const scale = ASPECT_RATIO_RULES["9:16"].scale; // 0.5625

响应式布局

// ViewportWrapper.tsx
import { useVideoConfig } from "remotion";
import { VIEWPORT_CONFIGS } from "codemotion/shared/presets/viewport-rules";

export const ViewportWrapper: React.FC<{
  platform: Platform;
  children: React.ReactNode;
}> = ({ platform, children }) => {
  const { width, height } = useVideoConfig();
  const config = VIEWPORT_CONFIGS[platform];

  // 计算缩放因子
  const scale = width / config.width;

  return (
    <div
      style={{
        transform: `scale(${scale})`,
        transformOrigin: "center center",
        width: config.width,
        height: config.height,
      }}
    >
      {children}
    </div>
  );
};

布局适配策略

9:16 竖屏（抖音/小红书）

┌─────────────────────┐
│                     │
│     顶部留白区       │
│    (约25%高度)      │
├─────────────────────┤
│                     │
│     核心内容区       │
│    (居中显示)        │
│                     │
├─────────────────────┤
│                     │
│     底部留白区       │
│   (字幕/进度条)      │
│                     │
└─────────────────────┘

16:9 横屏（B站/YouTube）

┌───────────────────────────────────────────┐
│ ┌─────────┐                 ┌─────────┐  │
│ │         │                 │         │  │
│ │  左侧   │     核心内容     │  右侧   │  │
│ │  字幕   │                 │  字幕   │  │
│ │         │                 │         │  │
│ └─────────┘                 └─────────┘  │
└───────────────────────────────────────────┘

使用示例

import { AbsoluteFill } from "remotion";
import { ViewportWrapper } from "./ViewportWrapper";
import { SceneContent } from "./SceneContent";

export const MyVideo = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "#000" }}>
      {/* 抖音版本 */}
      <ViewportWrapper platform="douyin">
        <SceneContent />
      </ViewportWrapper>

      {/* B站版本 */}
      <ViewportWrapper platform="bilibili">
        <SceneContent />
      </ViewportWrapper>
    </AbsoluteFill>
  );
};

多平台渲染

# 渲染抖音版本 (9:16)
npx remotion render MyVideo --composition-id=DouyinVideo out/douyin.mp4

# 渲染 B站版本 (16:9)
npx remotion render MyVideo --composition-id=BilibiliVideo out/bilibili.mp4

字幕位置适配

平台	字幕位置	说明
抖音	底部 15%	竖屏阅读习惯
B站	左侧 20%	横屏可用右侧
Instagram	底部 10%	方形空间有限
小红书	底部 20%	竖版图文

参考资源

• viewport-rules.ts
• PRD.md