OmniStudio文本块响应式字号实现方案咨询

要实现移动端12px、桌面端14px的响应式字号，推荐用CSS媒体查询替代内联固定样式，既符合OmniStudio的维护规范，也能保证样式的灵活性。

步骤1：清理内联固定字号 #

先移除span标签内的font-size: 12px;，避免内联样式覆盖后续的响应式规则：

<p>
    <span style="color: #7e8c8d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: #ffffff; display: inline !important; float: none;">Text Example</span>
</p>

步骤2：添加响应式样式 #

在OmniStudio的组件自定义样式区域或全局样式资源中，插入以下CSS代码：

/* 默认桌面端字号 */
.custom-responsive-text {
    font-size: 14px;
}

/* 移动端断点（可根据需求调整像素值） */
@media (max-width: 767px) {
    .custom-responsive-text {
        font-size: 12px;
    }
}

步骤3：关联类名到目标元素 #

给span标签添加自定义类名，绑定上面的响应式样式：

<p>
    <span class="custom-responsive-text" style="color: #7e8c8d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: #ffffff; display: inline !important; float: none;">Text Example</span>
</p>

应急替代方案：内联媒体查询（不推荐） #

如果无法添加外部样式，可尝试内联式媒体查询（兼容性有限）：

<p>
    <span style="color: #7e8c8d; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: #ffffff; display: inline !important; float: none; font-size: 14px; @media (max-width: 767px) { font-size: 12px; }">Text Example</span>
</p>

内容的提问来源于stack exchange，提问作者Rodolfo Barreto