#CSS变量

为了方便统一管理播放器内置 Widget 的整体风格，播放器预设了一组 CSS 变量。

目前所有内置 Widget 均已接入这些变量，开发者可以通过设置对应的 CSS 变量，来自定义 Widget 的文本颜色、背景色等样式属性，实现主题统一或个性化配置。

#变量定义

#变量列表

💡 修改 CSS 变量将自动作用于已加载的所有支持组件，无需逐个修改样式。

#使用示例

从播放器处传入优先级最高

<IPCPlayerIntegration
  style={{ height: '300px' }}
  instance={instance}
  devId={instance.devId}
  playerFit="cover"
  CSSVariable={{
    '--iconColor': '#ff6700',
    '--iconActiveColor': '#fff',
  }}
/>

#黑白主题区分

设备配置不同主题色变量

:root {
  --iconColor: '#000';
}
:root[theme='dark'] {
  --iconColor: '#fff';
}

#--ipc-player-size-scale

--ipc-player-size-scale 是播放器用于实现 屏幕适配 的缩放系数。

#设计背景

播放器中的所有 Widget 都未使用 rpx 单位，这是因为：

• rpx 是基于屏幕宽度的等比缩放单位；
• 播放器支持横屏模式，若在横屏下使用 rpx，会导致元素在视觉上 显得过大；
• 因此，播放器中统一使用 px 单位进行布局。

#为什么还需要缩放系数？

在一些设备屏幕较大的场景（如 iPad），如果仅使用固定的 px 值，元素可能看起来偏小。
为此，播放器引入了 --ipc-player-size-scale 缩放系数，用于动态调整 Widget 中的大小与位置。

#使用示例

.icon {
  font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
}

假设：

--iconFontSize 的值为 20px

--ipc-player-size-scale 默认为 1

则计算结果为：

20px × 1 = 20px

#icon 适配

如果希望在屏幕宽度超过 768px 且处于竖屏模式时，将 Icon 的字体大小调整为 30px，可以通过媒体查询动态修改缩放系数：

page {
  --ipc-player-size-scale: 1;
}

@media (min-width: 768px) and (orientation: portrait) {
  page {
    --ipc-player-size-scale: 1.5;
  }
}